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>

其中這裏取值的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版)】

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章