关于 vditor.insertValue()插入问题

本贴最后更新于 1195 天前,其中的信息可能已经东海扬尘

使用 vditor.insertValue()插入,发现代码块格式会丢失错乱,如下图

image.png

@88250 @Vanessa 求两位大佬解答

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    386 引用 • 1892 回帖 • 1 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • lzsk
    作者

    image.png

    image.png

    image.png

    insertValue 的值为后台返回的 content ,用 new Vditor 可以完美展示 但是用 insertValue 就会出现问题

  • lzsk 3 评论
    作者

    @Vanessa 已发代码

    发哪里了?
    Vanessa
    只上传了下面的图片 我把代码复制给你吧
    lzsk
    需要把代码块文本也一并给你吗 @Vanessa
    lzsk
  • lzsk
    作者
    const config: any = {
          width: '100%',
          minHeight: 400,
          // cdn: '/public/js/vditor',
          cdn: 'https://staticweb.ewan.cn/libs/vditor',
          placeholder: '请输入markdown格式文本',
          toolbar: [
            'headings',
            'bold',
            'italic',
            'strike',
            '|',
            'line',
            'quote',
            'list',
            'ordered-list',
            'check',
            'outdent',
            'indent',
            'code',
            'inline-code',
            'insert-after',
            'insert-before',
            'undo',
            'redo',
            'upload',
            'link',
            'table',
            'edit-mode',
            'preview',
            'fullscreen',
            'outline',
            'export',
            {
              hotkey: '⌘-⇧-S',
              name: 'sponsor',
              tipPosition: 's',
              tip: '成为赞助者',
              className: 'right',
              icon: 'xxx',
              click() {
                md.insertValue(props.data[props.option.key]);
              }
            }
          ],
          tab: '\t',
          preview: {
            delay: 50,
            maxWidth: 19200,
            toc: true,
            hljs: {
              lineNumber: true,
              style: {
                'max-height': 'auto'
              }
            },
            actions: ['desktop', 'tablet', 'mobile'],
            markdown: {
              fixTermTypo: true,
              listStyle: true,
              codeBlockPreview: false
            }
          },
          outline: {
            enable: true,
            position: 'right'
          },
          cache: {
            enable: false
          },
          // input: onChange,
          // focus: onChange,
          blur: onChange,
          after: () => {}
        };
        onMounted(() => {
          key.value = Math.random();
          setTimeout(() => {
            md = new Vditor('content', {
              ...config,
              value: props.data[props.option.key]
            });
          }, 150);
        });
    

    @Vanessa 你好这就是所写代码, props.data[props.option.key]为后端返回的 markdown 文本,其中代码块部分用 insertValue 插入的话 就会出现错乱

  • lzsk
    作者
    
    
    
        <!-- TODO 超级SDK:添加网络安全配置, 以在Android9.0上访问http资源 -->
        <application
    
            android:networkSecurityConfig="@xml/super_network_security_config" >
    
    
    
            <!-- SuperSDK start -->
            <!-- TODO 超级SDK:添加FileProvider配置,以在Android9.0上访问文件,${package_name}为应用包名,包名在gradle中配置 -->
            <provider
                android:name="cn.ewan.supersdk.provider.SuperFileProvider"
                android:authorities="${package_name}.super.fileprovider"
                android:exported="false"
                android:grantUriPermissions="true">
                <meta-data
                    android:name="android.support.FILE_PROVIDER_PATHS"
                    android:resource="@xml/super_file_path"/>
            </provider>
            <!-- SuperSDK end -->
    
        </application>
    

    @Vanessa 可尝试用这个代码块 用 insertValue 插入

  • 试试这个

    vditor.insertValue(`\n\`\`\`java
    
    
    
        <!-- TODO 超级SDK:添加网络安全配置, 以在Android9.0上访问http资源 -->
        <application
    
            android:networkSecurityConfig="@xml/super_network_security_config" >
    
    
    
            <!-- SuperSDK start -->
            <!-- TODO 超级SDK:添加FileProvider配置,以在Android9.0上访问文件,\${package_name}为应用包名,包名在gradle中配置 -->
            <provider
                android:name="cn.ewan.supersdk.provider.SuperFileProvider"
                android:authorities="\${package_name}.super.fileprovider"
                android:exported="false"
                android:grantUriPermissions="true">
                <meta-data
                    android:name="android.support.FILE_PROVIDER_PATHS"
                    android:resource="@xml/super_file_path"/>
            </provider>
            <!-- SuperSDK end -->
    
        </application>
    \`\`\``.replace(/</g, "&amp;lt;"))
    
    4 回复
    2 操作
    Vanessa 在 2022-09-23 15:15:48 更新了该回帖
    Vanessa 在 2022-09-23 15:15:11 更新了该回帖
  • lzsk 6 评论
    作者

    你好,那假如我要插入的 markdown 文档中,代码块只是其中一部分 那这种插入方法不就没用了吗,例如一篇 markdown 文档中不止有代码块 还有其他的文本格式 @Vanessa

    整段用 setValue
    Vanessa
    @Vanessa 问题是我想实现的功能是在原有的 markdown 文章插入其他的 markdown 文章,setValue 不是会清空掉原来的 markdown 吗
    lzsk
    @Vanessa 我想要的是在原来的 markdown 文本光标处插入一段别的 markdown,而这其中就会导致新插入的 markdown 文本里的代码块出现问题
    lzsk
    @lzsk 那就先 replace 试试
    Vanessa
    @Vanessa 用了你的代码发现是可以的 但是就是如我之前提的,如果是一整篇 markdown 在光标处插入另外一篇 markdown,插入的内容里面不单单是代码块,那这种该怎么解决呢
    lzsk
    @Vanessa 用了 replace 实验后发现代码块后面跟着外链链接 会把外链链接带到代码块里面去,也会出现出现错乱,我在下方发图片给你看下
    lzsk
  • lzsk 5 评论
    作者

    image.png

    image.png

    用了大佬的代码试了下 好像不行 @Vanessa

    最后一个是 &lt; 代码块中输入不进去。
    Vanessa
    @Vanessa 那要是代码块只是一整篇 markdown 文章的一部分,要怎么解决 insertValue 问题呢
    lzsk
    @Vanessa 我要不把整篇 markdown 文章上传给你,因为不单单是插入这一段代码块而已
    lzsk
    @lzsk 可以获取已有内容,然后加上添加的内容一起 setValue
    Vanessa
    @Vanessa 可那样如何在光标处插入呢,要我自己去获取光标处位置吗
    lzsk
  • lzsk
    作者

    不用插入 insertValue 而用 newVidtor 时 渲染是正确的:

    image.png

    @Vanessa

  • lzsk 12 评论
    作者

    @Vanessa 下图是使用 replace 会引发的问题

    image.png

    image.png

    看上去是对的。代码块是不会渲染链接的。
    Vanessa
    @Vanessa 不不不,第二张图其实是用 newVditor 的渲染,第一张图是用你提供的方法去渲染,然后出错了,原本应该跟在代码块后的链接,直接放到了代码块上去了
    lzsk
    @Vanessa 我可以把整篇 markdown 发给你吗,你可以试试用 insertValue 真的有 bug
    lzsk
    @lzsk insertValue 是特殊处理过的。可以使用 setValue
    Vanessa
    @Vanessa v 姐 我可以加你个 qq 啥的吗 方便沟通这个问题 可能是我表达有问题
    lzsk
    @Vanessa setValue 我晓得可以整篇替换,但是我的需求是在第一篇 md 的随意光标处插入第二篇 md,所以理论上说 setValue 不适用,而如果第二篇 md 只有代码块内容的话,确实可以使用大佬你提供的 replace 去解决,但是如果不只是代码块内容,就会出现问题,例如用来插入的 md 里的代码块后面有一个链接,我发现用 replace 就会将链接带到代码块里面去,就如我所发的图片那样子,求大佬解答
    lzsk
    @lzsk 随意光标处插入可能会有问题哦。md 语法被打断会造成更多的问题。
    Vanessa
    @Vanessa 那请问以后会有修复吗,我发现市面其他的编辑器,关于插入的 api 都没有这种问题,例如 vue-markdown-editor
    lzsk
    @lzsk 最近没有时间哦,你可以先用 vue-markdown-editor
    Vanessa
    @Vanessa 谢谢大佬解答 是我唐突了 嘻嘻
    lzsk
    @lzsk 没有没有,最近在肝思源笔记
    Vanessa
    @Vanessa 嗯呐 希望 vditor 越来越好
    lzsk
  • zzwwwwww

    @ Vanessa 从 vscode 复制 md 文档的时候 会自动在开头添加 ``` 代码块 末尾也会 如何去掉呢

请输入回帖内容 ...

推荐标签 标签

  • gRpc
    11 引用 • 9 回帖 • 116 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 133 关注
  • 安全

    安全永远都不是一个小问题。

    202 引用 • 818 回帖
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    36 引用 • 200 回帖 • 54 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3206 引用 • 8217 回帖
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    316 引用 • 547 回帖 • 4 关注
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 329 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 2 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    34 引用 • 333 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 706 关注
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    85 引用 • 414 回帖
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    16 引用 • 143 回帖 • 6 关注
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 1 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    39 引用 • 170 回帖
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 769 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • 千千插件

    千千块(自定义块 css 和 js)
    可以用 ai 提示词来无限创作思源笔记

    32 引用 • 69 回帖 • 1 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 55 关注
  • danl
    216 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 799 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    28441 引用 • 119746 回帖
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖 • 2 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 9 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 56 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 691 关注