轻松记录您
灵感和创意

markdown的编辑内容怎么回显成HTML

当我们用markdown插件将编辑的内容存入数据库后,怎么在html回显呢?
插入如下代码即可:
HTML代码:

<div style=”background-color: yellow”>
<div id=”doc-content” style=”width: 60%;margin-left: 20%;background-color:yellowgreen;margin-top: 0%;”>
<textarea style=”display:none;” th:text=”${blog.content}”></textarea>
</div>
</div>
1
2
3
4
5
其中这里取值的text根据自己的情况而定
JS代码:

var testEditor;
$(function () {
testEditor = editormd.markdownToHTML(“doc-content”, {//注意:这里是上面DIV的id
htmlDecode: “style,script,iframe”,
emoji: true,
taskList: true,
tex: true, // 默认不解析
flowChart: true, // 默认不解析
sequenceDiagram: true, // 默认不解析
codeFold: true,
});
});

1
2
3
4
5
6
7
8
9
10
11
12
13
CSS与JS 的引入:

script th:src=”@{../markdown/js/jquery.min.js}”></script>
<script th:src=”@{../markdown/js/editormd.min.js}”></script>
<script th:src=”@{../bootstrap/js/bootstrap.js}”></script>

<script th:src=”@{../markdown/lib/marked.min.js}”></script>
<script th:src=”@{../markdown/lib/prettify.min.js}”></script>
<script th:src=”@{../markdown/lib/raphael.min.js}”></script>
<script th:src=”@{../markdown/lib/underscore.min.js}”></script>
<script th:src=”@{../markdown/lib/sequence-diagram.min.js}”></script>
<script th:src=”@{../markdown/lib/flowchart.min.js}”></script>
<script th:src=”@{../markdown/lib/jquery.flowchart.min.js}”></script>

<link rel=”stylesheet” th:href=”@{~/markdown/css/style.css}”/>
<link rel=”stylesheet” th:href=”@{~/markdown/css/editormd.css}”/>
<link rel=”stylesheet”select.css}”>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
主要引入的是markdown的一些包,js和css文件,在lib文件夹下、
这是我的项目上的。
在这里插入图片描述
将下载的markdown文件夹下与上面依赖的一些包导入自己的项目即可。

未经允许不得转载:坚果云Markdown » markdown的编辑内容怎么回显成HTML
分享到: 更多 (0)

坚果云Markdown轻松记录您 灵感和创意

坚果云Markdown下载坚果云Markdown介绍