我在开发一个应用,打算使用 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>
这样做会有什么弊端吗?
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于