java中集成Markdown富客户端
虽然在项目中，可能很少会给客户用到Markdown编辑器，毕竟你不能指望最终用户会明白这些语法，但假如是做一个自用的系统，比如自己的一个blog，那么集成一个Markdown还是会显著的方便好多，在Java的web项目中，集成一个Markdown编辑器还是很方便的
背景
举例的系统的架构为SpringMVC，模板框架使用的为Thymeleaf，这种情况下，集成Markdown超级方便
下载
editor.md是一款非常好用的开源在线 Markdown 编辑器，集成Markdown主要就通过他来实现
集成
下载后，需要把相关的文件复制到项目中，需复制目录如下：
其中examples和docs顾名思义即为样例和文档文件，可以不考，
然后在页面内，首先引用css：
然后引用js文件(含jquery)
然后，在html代码中添加容纳Markdown编辑器的div和textarea，注意，textarea需要两个，其中一个用于保存生成后的html，即最终需要提交的html：
而还需要在页面载入完成后加载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
});
});
这样，最终的效果如下：
写入测试内容后：
提交后后台打印提交输入如下：
测试标题
二级标题
test
- 列表1
- 列表2
- 列表3
后台代码：
@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"]
},
分别使用名字对应响应的图标，具体配置方式参阅文档。其中"|"表示分隔符