editmd输出到前端显示
阅读原文时间:2023年07月10日阅读:1

官方案例:html-preview-markdown-to-html.html
输出后台数据显示在前端,格式化内容



Simple example - Editor.md examples

    <div id="layout">  
        <div class="layui-form-item">

       <h2 th:text="${article.title}"></h2>  
        </div>  
        <label class="layui-form-label">分类</label>  
        <div class="layui-input-block">  
                <label  class="layui-form-label" th:each="enum:${articleEnum}" th:if="${enum.id eq article.type}" th:value="${enum.id}" th:text="${enum.name}"></label>  
        </div>  
        </div>  
    <div id="test-editormd-view">  
            <textarea style="display:none;" name="textContent" th:text="${article.textContent}">  
            </textarea>  
        <!-- 第二个隐藏文本域,用来构造生成的HTML代码,方便表单POST提交,这里的name可以任意取,后台接受时以这个name键为准 -->  
        <!--<textarea id="text" class="editormd-html-textarea" name="content"></textarea>-->  
    </div>  
    </div>  
    <div class="layui-form-item">  
    </div>  
</form>

    <script src="js/jquery.min.js" th:src="@{/editmd/js/jquery.min.js}"></script>  
<script src="/lib/layui/layui.js" charset="utf-8"></script>

<script src="../lib/marked.min.js" th:src="@{/editmd/lib/marked.min.js}"></script>  
<script src="../lib/prettify.min.js" th:src="@{/editmd/lib/prettify.min.js}"></script>

<script src="../lib/raphael.min.js" th:src="@{/editmd/lib/raphael.min.js}"></script>  
<script src="../lib/underscore.min.js" th:src="@{/editmd/lib/underscore.min.js}"></script>  
<script src="../lib/sequence-diagram.min.js" th:src="@{/editmd/lib/sequence-diagram.min.js}"></script>  
<script src="../lib/flowchart.min.js" th:src="@{/editmd/lib/flowchart.min.js}"></script>  
<script src="../lib/jquery.flowchart.min.js" th:src="@{/editmd/lib/jquery.flowchart.min.js}"></script>

<script src="../editormd.min.js" th:src="@{/editmd/editormd.min.js}"></script>

<script type="text/javascript">  
    $(function() {  
        var testEditormdView;  
        testEditormdView = editormd.markdownToHTML("test-editormd-view", {  
            htmlDecode      : "style,script,iframe",  // you can filter tags decode  
            emoji           : true,  
            taskList        : true,  
            tex             : true,  // 默认不解析  
            flowChart       : true,  // 默认不解析  
            sequenceDiagram : true,  // 默认不解析  
        });  
    });  
</script>

<script type="text/javascript">  
    layui.use(\['form','layer'\], function(){

        var form = layui.form;  
        var layer = layui.layer;  
    });  
</script>  
</body>