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

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

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 插入的话 就会出现错乱
<!-- 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, "&lt;"))
Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。
安全永远都不是一个小问题。
发布对别人有帮助的原创内容是最好的 SEO 方式。
Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。
NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。
Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。
提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。
黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。
A second brain, for you, forever.
Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。
ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。
宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”
Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。
JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。
Quicker 您的指尖工具箱!操作更少,收获更多!
Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。
持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。
千千块(自定义块 css 和 js)
可以用 ai 提示词来无限创作思源笔记
本标签主要用于分享网络空间安全专业的学习笔记
Mobi.css is a lightweight, flexible CSS framework that focus on mobile.
思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。
融合块、大纲和双向链接,重构你的思维。
心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。
1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。
OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。
RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。
H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于