大家是如何渲染 HTML 内容的？

我在开发一个应用，打算使用 Vditor 作为编辑器。我在数据表中分别存储从编辑器获取的 markdown_content 和 html_content。

渲染的时候，直接从数据库中检索出 html_content 渲染到 HTML 页面中，如下。


<html><head><link rel="stylesheet" type="text/css" href="https://ld246.com/js/lib/vditor/dist/index.css"/>
<script src="https://ld246.com/js/lib/vditor/dist/js/i18n/zh_CN.js"></script>
<script src="https://ld246.com/js/lib/vditor/dist/method.min.js"></script></head>
<body>
	<!-- 渲染HTML内容 -->
	<div class="vditor-reset" id="preview">${model.htmlContent}</div>
<script>
    const previewElement = document.getElementById('preview')
    Vditor.setContentTheme('light', 'https://ld246.com/js/lib/vditor/dist/css/content-theme');
    Vditor.codeRender(previewElement);
    Vditor.highlightRender({"enable":true,"lineNumber":false,"defaultLang":"","style":"github"}, previewElement, 'https://ld246.com/js/lib/vditor');
    Vditor.mathRender(previewElement, {
        cdn: 'https://ld246.com/js/lib/vditor',
        math: {"engine":"KaTeX","inlineDigit":false,"macros":{}},
    });
    Vditor.mermaidRender(previewElement, 'https://ld246.com/js/lib/vditor', 'classic');
    Vditor.markmapRender(previewElement, 'https://ld246.com/js/lib/vditor', 'classic');
    Vditor.flowchartRender(previewElement, 'https://ld246.com/js/lib/vditor');
    Vditor.graphvizRender(previewElement, 'https://ld246.com/js/lib/vditor');
    Vditor.chartRender(previewElement, 'https://ld246.com/js/lib/vditor', 'classic');
    Vditor.mindmapRender(previewElement, 'https://ld246.com/js/lib/vditor', 'classic');
    Vditor.abcRender(previewElement, 'https://ld246.com/js/lib/vditor');
    Vditor.mediaRender(previewElement);
    Vditor.speechRender(previewElement);
</script>
<script src="https://ld246.com/js/lib/vditor/dist/js/icons/ant.js"></script></body></html>

这样做会有什么弊端吗？

怎么使用 VditorPreview 呢？

vditor 离线使用，我之前是 import 导入 VditorPreview,按照官网我把 dist 放在 public 后，我把 vditor 的 node 包删掉了，之前写的 import 导入 VditorPreview 注释掉，后续不知道怎么操作了，VditorPreview 控制台报错找不到，我加上 cd ..

vditor 能和思源笔记结合用吗

我说的用法是 nextcloud 用 viditor 来做 md 的文件编辑器，然后这样就能分享协作了同时思源笔记就是本地的工具用 webdav 来做同步可是我找不到 viditor 跟 nextcloud 的结合方法没得相应的程序感觉 viditor 跟思源的编辑器不一致啊，这个好像没得缩进线也不能折叠 ..

Katex 行内公式换行渲染

我的数据库中有大量数据使用了行内公式换行我发现最新版本一旦在单$包裹内换行, 分屏预览就不能渲染数学公式了, 但是以前的版本是可以的能不能改回去或者增加配置? 以前版本的 [图片] 现在版本的 [图片] 目前版本缩小到了 3.7.7 和 3.8.7 之间, 前者可以后者不可以, 不知道是哪里改了? 拜托, 我真的很 ..

Vditor getHTML()或者 html2md(value: string) 方法逻辑有误，不能完全转换

我自己的基于 Vditor 的应用中，实现了一个基于 HTML 元素查找的“查找替换”菜单，原理是基于 DOM 元素的搜索，来进行查找替换。在进行替换操作时，我的逻辑是会对 DOM 元素进行文字替换，而不是直接修改 vditor 的 value。 [图片] 因此 HTML 和 Vditor 的 value 是不同步的 ..

给 vditor 添加 vscode 的主题兼容

目前 vditor 的样式比较少，而且我觉得同为编辑器没必要再花费精力去制作主题。所以想着可以兼容 vscode 的主题样式。具体思路为，先使用 [链接] 替换现在的 highlightjs。之后给 vditor 的默认 css 样式改为使用 css 变量的模板，这些 css 变量都从 vscode 的主题样式中抽取 ..

欢迎来到这里！