登录 注册

关于 vditor.insertValue(）插入问题

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

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

image.png

@88250 @Vanessa 求两位大佬解答

  • Vditor

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

    311 引用 • 1666 回帖 • 2 关注
广州 位置
1 关注
11 回帖
8
2
703 115 91 157 5 24 310

相关帖子

11 回帖
关于 vditor.insertValue(）插入问题

欢迎来到这里！

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

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

    image.png

    image.png

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

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

    @Vanessa 已发代码

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

近期热议

推荐标签 标签

  • SMTP

    SMTP（Simple Mail Transfer Protocol）即简单邮件传输协议，它是一组用于由源地址到目的地址传送邮件的规则，由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 589 关注
  • LaTeX

    LaTeX（音译“拉泰赫”）是一种基于 ΤΕΧ 的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在 20 世纪 80 年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    9 引用 • 32 回帖 • 169 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 44 关注
  • RYMCU

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

    4 引用 • 6 回帖 • 38 关注
  • 服务

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

    41 引用 • 24 回帖 • 4 关注
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    163 引用 • 1450 回帖 • 2 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 906 回帖 • 191 关注
  • H2

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

    11 引用 • 54 回帖 • 641 关注
  • 坑

    一些有用的避坑指南。

    69 引用 • 93 回帖
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织，“用爱发电”象征开源与贡献精神，加入组织，代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入：用爱发电组织邀请帖。
    用爱发电组织官网：https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力：

    • 遵守开源守则，体现开源&贡献精神：以分享为目的，拒绝非法牟利。
    • 自我保护：使用适当的 License 保护自己的原创作品。
    • 尊重他人：不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露；以礼相待，尊重所有对社区做出贡献的开发者；通过他人的分享习得知识，要留下足迹，表示感谢。
    • 热爱编程、热爱学习：加入组织，热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友，也同样欢迎默默成就的朋友。
    • 倾听：正确并恳切对待、处理问题与建议，及时修复开源项目的 Bug ，及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视：不诋毁、轻视、嘲讽其他开发者，主动提出建议、施以帮助，以和谐为本。只要他人肯努力，你也可能会被昔日小看的人所超越，所以请保持谦虚。
    • 乐观且活跃：你的努力决定了你的高度。不要放弃，多年后回头俯瞰，才会发现自己已经成就往日所仰望的水平。积极地将项目开源，帮助他人学习、改进，自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 7 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    228 引用 • 1450 回帖
  • Electron

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

    15 引用 • 136 回帖 • 10 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 629 关注
  • 链书

    链书（Chainbook）是 B3log 开源社区提供的区块链纸质书交易平台，通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书，我们共同构建这个全新的交易平台，让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线，也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • Java

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

    3167 引用 • 8207 回帖
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    180 引用 • 447 回帖 • 2 关注
  • 倾城之链
    23 引用 • 66 回帖 • 97 关注
  • CAP

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

    11 引用 • 5 回帖 • 563 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    116 引用 • 99 回帖 • 265 关注
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    940 引用 • 1458 回帖 • 156 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    85 引用 • 895 回帖
  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 5 关注
  • 心情

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

    59 引用 • 369 回帖
  • SQLite

    SQLite 是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    4 引用 • 7 回帖 • 1 关注
  • CloudFoundry

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

    5 引用 • 18 回帖 • 150 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具，主要功能包括：位置相关的内容递送；用户认证和授权；集中式网络监控。

    1 引用 • 7 回帖 • 547 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用，支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    15 引用 • 7 回帖 • 9 关注

最新标签