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"]
},
分别使用名字对应响应的图标，具体配置方式参阅文档。其中"|"表示分隔符
