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版)】

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值