當我們用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>
其中這裏取值的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,
});
});
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}">
主要引入的是markdown的一些包,js和css文件,在lib文件夾下、
這是我的項目上的。
將下載的markdown文件夾下與上面依賴的一些包導入自己的項目即可。
效果:
之後再進行美化即可!
頁面怎麼繼承markdown插件?
請看我的CSDN:如何在HTML中集成markdown插件【springboot項目使用的thymleaf模板引擎(idea版)】