关于 vditor.insertValue()插入问题

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

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

image.png

@88250 @Vanessa 求两位大佬解答

  • Vditor

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

    311 引用 • 1666 回帖

相关帖子

欢迎来到这里!

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

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

    image.png

    image.png

    image.png

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

  • 其他回帖
  • 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
  • 试试这个

    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
    作者
    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 插入的话 就会出现错乱

  • 查看全部回帖

推荐标签 标签

  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    169 引用 • 799 回帖
  • CodeMirror
    1 引用 • 2 回帖 • 116 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 42 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 693 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    83 引用 • 165 回帖 • 48 关注
  • 大疆创新

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

    2 引用 • 14 回帖
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖 • 3 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖 • 1 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    164 引用 • 594 回帖 • 1 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 131 关注
  • CloudFoundry

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

    5 引用 • 18 回帖 • 149 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    51 引用 • 226 回帖
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    491 引用 • 1383 回帖 • 372 关注
  • 正则表达式

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

    31 引用 • 94 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    710 引用 • 1173 回帖 • 177 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 17 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 12 关注
  • 强迫症

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

    15 引用 • 161 回帖 • 1 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 422 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    19 引用 • 31 回帖 • 3 关注
  • 反馈

    Communication channel for makers and users.

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

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    123 引用 • 168 回帖 • 1 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 372 关注
  • Facebook

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

    4 引用 • 15 回帖 • 455 关注
  • 招聘

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

    189 引用 • 1056 回帖
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 43 关注