集成editormd支持markdown语法（二）之页面显示及回显

一、显示markdown内容

引入css和js

<link rel="stylesheet" href="${ctx}/editormd/css/editormd.preview2.css" />
<link rel="stylesheet" href="${ctx}/editormd/css/editormd3.css" />

<script src="${ctx}/editormd/lib/marked.min.js"></script>
<script src="${ctx}/editormd/lib/prettify.min.js"></script>
<script src="${ctx}/editormd/lib/editormd.min.js"></script>

给显示内容的div加个id

<div  id="content-text">${cont.content}</div>

最后调用js将markdown转为html显示

<script language=javascript>
    editormd.markdownToHTML("content-text_"+id);
</script>

如果后台传来的是个list集合，如：

request.setAttribute("list", JSON.toJSONString( endPage.getResult() )  );

则要给每个div都赋值不同的id，如：

<div  id="content-text_${cont.id}">${cont.content}</div>

然后给每个div的markdown转为html显示

$(function () {
    var clist = ${list};
    $(clist).each(function () {
        var id = this.id
        editormd.markdownToHTML("content-text_"+id);
    })

二、回显

当编辑的时候需要回显内容，发现已经没有了样式

我采用的是比较笨的一种方法，将md格式和html格式的数据都保存一份，它们相互转换的方法没找到合适的

上一节在显示编辑器的时候说过两个文本域，一个是md格式的一个是html格式的

    <div class=" editormd"  id="test-editormd">
        <textarea class="editormd-markdown-textarea" id="editormd" name="test-editormd-markdown-doc">${cont.editormd}</textarea>
        <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
        <textarea class="editormd-html-textarea" id="content" name="content"></textarea>
    </div>

再创建一个隐藏域用于接收md格式的值，或者后台直接用name="test-editormd-markdown-doc"进行接收（没试）

<input type="hidden" name="editormd" id="editormdVal"/>

然后js获取md格式的值赋值给隐藏域

 var editormd2=$("#editormd").val();

   $("#editormdVal").val(editormd2)

然后编辑的时候用EL表达式（${cont.editormd}）直接回显md格式的内容即可

访问我的达人课

访问我的博客 Wang's Blog

关注我的微信公众号获取更多资源