关于 vditor.insertValue()插入问题

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

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

image.png

@88250 @Vanessa 求两位大佬解答

  • Vditor

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

    386 引用 • 1892 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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
  • 其他回帖
  • lzsk 5 评论
    作者

    image.png

    image.png

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

    最后一个是 < 代码块中输入不进去。
    Vanessa
    @Vanessa 那要是代码块只是一整篇 markdown 文章的一部分,要怎么解决 insertValue 问题呢
    lzsk
    @Vanessa 我要不把整篇 markdown 文章上传给你,因为不单单是插入这一段代码块而已
    lzsk
    @lzsk 可以获取已有内容,然后加上添加的内容一起 setValue
    Vanessa
    @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 3 评论
    作者

    @Vanessa 已发代码

    发哪里了?
    Vanessa
    只上传了下面的图片 我把代码复制给你吧
    lzsk
    需要把代码块文本也一并给你吗 @Vanessa
    lzsk
  • 查看全部回帖

推荐标签 标签

  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1746 回帖 • 10 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    4 引用 • 16 回帖 • 198 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 548 关注
  • Sillot

    Insights(注意当前设置 master 为默认分支)

    汐洛彖夲肜矩阵(Sillot T☳Converbenk Matrix),致力于服务智慧新彖乄,具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架(Sillot-Gibbet)基于自思源笔记(siyuan-note),前身是思源笔记汐洛版(更早是思源笔记汐洛分支),是智慧新录乄终端(多端融合,移动端优先)。

    主仓库地址:Hi-Windom/Sillot

    文档地址:sillot.db.sc.cn

    注意事项:

    1. ⚠️ 汐洛仍在早期开发阶段,尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计,使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记,开发者尽最大努力与思源笔记保持兼容,但无法实现 100% 兼容
    29 引用 • 25 回帖 • 152 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    167 引用 • 408 回帖 • 494 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 475 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 64 关注
  • 倾城之链
    23 引用 • 66 回帖 • 188 关注
  • AWS
    11 引用 • 28 回帖 • 1 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 646 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 847 关注
  • Facebook

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

    4 引用 • 15 回帖 • 443 关注
  • JVM

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

    180 引用 • 120 回帖
  • Word
    13 引用 • 41 回帖 • 1 关注
  • 书籍

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

    85 引用 • 414 回帖
  • Rust

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

    60 引用 • 22 回帖
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 412 关注
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖 • 7 关注
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 572 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    78 引用 • 37 回帖
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    79 引用 • 431 回帖 • 1 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 1 关注
  • Quicker

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

    39 引用 • 170 回帖
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 623 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    91 引用 • 59 回帖 • 1 关注