When we use the markdown plug-in to save the edited content into the database, how can it be echoed in html?
Just insert the following code:
HTML code:
<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>
The text of the value here depends on the
JS code of your own situation :
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,
});
});
Introduction of CSS and 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}">
The main introduction is some packages of markdown, js and css files, under the lib folder,
which are on my project.
Import the downloaded markdown folder and some of the above dependent packages into your own project.
Effect:
Just beautify afterwards!
How does the page inherit the markdown plugin?
Please see my CSDN: How to integrate markdown plug-in in HTML [thymleaf template engine used by springboot project (idea version)]