editor.md 后台编辑后保存到数据, 如何在前台页面显示内容?

ao218c7q 于 2022-12-31 发布在其他

关注(0)|答案(4)|浏览(332)

后台编辑后保存到数据, 如何在前台页面显示内容?
testEditor.getMarkdown(); // 获取 Markdown 源码
testEditor.getHTML(); // 获取 Textarea 保存的 HTML 源码
testEditor.getPreviewedHTML(); // 获取预览窗口里的 HTML，在开启 watch 且没有开启 saveHTMLToTextarea 时使用

这三种模式,在前台的页面里, 各怎么渲染出来, 文档上并没有说

editor.md

来源：https://github.com/pandao/editor.md/issues/627

4条答案

按热度按时间

pieyvz9o1#

<div id="test-editormd-view">
<textarea style="display:none;" name="test-editormd-markdown-doc">markdown内容</textarea>
</div>

<script type="text/javascript">
     $(function(){
          editormd.markdownToHTML("test-editormd-view"});
    });
</script>

具体的看看这篇文章或者官网示例就清楚了

https://www.hexcode.cn/article/show/editormd

赞(0）回复(0）举报 2022-12-31

f45qwnt82#

预览视图是有特定的样式的，通过getHTML获取到内容后，用下面这个包起来即可。至于editormd部分，可以通过jquery的hide()隐藏掉。
<div class="markdown-body editormd-preview-container" previewcontainer="true" style="padding: 20px;">${this.htmlData}</div>

赞(0）回复(0）举报 2022-12-31

6mw9ycah3#

md文档作为示例，
$.get('test.md', function(md){
testEditor = editormd("test-editormd", {
width: "90%",
height: 740,
path : '../lib/',
theme : "dark",
previewTheme : "dark",
editorTheme : "pastel-on-dark",
markdown : test.md,
codeFold : true,
//syncScrolling : false,
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
searchReplace : true,
}
});
});
get后面的test.md就是你要打开的md文件的路径