java中集成Markdown富客户端

虽然在项目中，可能很少会给客户用到Markdown编辑器，毕竟你不能指望最终用户会明白这些语法，但假如是做一个自用的系统，比如自己的一个blog，那么集成一个Markdown还是会显著的方便好多，在Java的web项目中，集成一个Markdown编辑器还是很方便的

背景

举例的系统的架构为SpringMVC，模板框架使用的为Thymeleaf，这种情况下，集成Markdown超级方便

下载

editor.md是一款非常好用的开源在线 Markdown 编辑器，集成Markdown主要就通过他来实现

集成

下载后，需要把相关的文件复制到项目中，需复制目录如下：

其中examples和docs顾名思义即为样例和文档文件，可以不考，

然后在页面内，首先引用css：

 <link href="/editormd/css/editormd.min.css" rel="stylesheet" type="text/css" />

然后引用js文件(含jquery)

<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script src="/editormd/editormd.js"></script>
<script src="/editormd/editormd.amd.js"></script>

然后，在html代码中添加容纳Markdown编辑器的div和textarea，注意，textarea需要两个，其中一个用于保存生成后的html，即最终需要提交的html：

   <!-- editormd start -->
    <div class="editormd form-control" style="margin: 0px;" id="test-editormd">
        <textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc" id="editormd"></textarea>
        <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
        <!-- html textarea 需要开启配置项 saveHTMLToTextarea == true -->
        <textarea class="editormd-html-textarea" name="editorhtml" id="editorhtml"></textarea>
    </div>
    <!-- editormd end -->

而还需要在页面载入完成后加载Markdown的解析方法：

   var testEditor;
testEditor=$(function() {
    editormd("test-editormd", {
        width   : "100%",
        height  : 340,
        codeFold : true,
        syncScrolling : "single",
        //你的lib目录的路径
        path    : "/editormd/lib/",
        imageUpload: false,//关闭图片上传功能
        emoji: false,
        taskList: true,
        tocm: true,         // Using [TOCM]
        tex: true,                   // 开启科学公式TeX语言支持，默认关闭
        flowChart: true,             // 开启流程图支持，默认关闭
        sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
        saveHTMLToTextarea : true
    });
});

这样，最终的效果如下：

写入测试内容后：

提交后后台打印提交输入如下：

测试标题
<h2 id="h2-u4E8Cu7EA7u6807u9898"><a name="二级标题" class="reference-link"></a><span class="header-link octicon octicon-link"></span>二级标题</h2><blockquote>
<p>test</p>
</blockquote>
<ol>
<li>列表1</li><li>列表2</li><li>列表3</li></ol>

后台代码：

@RequestMapping(value = "/addblog",method = RequestMethod.POST)
public String addPostBlog(String title,String content){
    System.out.println(title);
    System.out.println(content);
    return "/blog/addblog";
}

设置工具栏

自定义工具栏可以在js代码中editormd方法增加属性完成

 toolbarIcons : function() {
        // Or return editormd.toolbarModes[name]; // full, simple, mini
        // Using "||" set icons align right.
        return ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "testIcon2", "file", "faicon", "||", "watch", "fullscreen", "preview", "testIcon"]
    },

分别使用名字对应响应的图标，具体配置方式参阅文档。其中"|"表示分隔符