关于 vditor.insertValue()插入问题

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

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

image.png

@88250 @Vanessa 求两位大佬解答

  • Vditor

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

    366 引用 • 1842 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 贴一下代码

    4 回复
  • 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 文档的时候 会自动在开头添加 ``` 代码块 末尾也会 如何去掉呢

请输入回帖内容 ...

推荐标签 标签

  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 1 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 2 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 169 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖 • 3 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 678 关注
  • 服务

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

    41 引用 • 24 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 4 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 735 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    183 引用 • 1011 回帖 • 2 关注
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 159 关注
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    12 引用 • 5 回帖 • 638 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    210 引用 • 2040 回帖
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 543 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 250 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 5 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    143 引用 • 442 回帖
  • OpenCV
    15 引用 • 36 回帖 • 1 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 442 关注
  • 印象笔记
    3 引用 • 16 回帖
  • 招聘

    哪里都缺人,哪里都不缺人。

    189 引用 • 1057 回帖
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    88 引用 • 139 回帖
  • 叶归
    5 引用 • 16 回帖 • 11 关注
  • Mobi.css

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

    1 引用 • 6 回帖 • 755 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 391 关注