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

一、显示markdown内容

引入css和js

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

<script src="${ctx}/editormd/lib/"></script>
<script src="${ctx}/editormd/lib/"></script>
<script src="${ctx}/editormd/lib/"></script>

给显示内容的div加个id

<div  >${}</div>

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

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

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

("list", ( () )  );

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

<div  >${}</div>

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

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

二、回显

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

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

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

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

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

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

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

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

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

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

访问我的达人课

访问我的博客 Wang's Blog

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