最近项目中需要一个新闻管理的功能，就想到了Markdown编辑器。去了Markdown官网才发现，原来这么多大厂都在使用Markdown编辑器。下图为Markdown主要用户。
是不是感觉很厉害！下面来一起看一下Markdown的具体实现吧！！！
准备工作
在使用之前当然是需要先下载对应的插件，下载地址：https://pandao.github.io/editor.md/index.html
下载完成后引入需要的文件
<link rel="stylesheet" type="text/css" href="static/editor/css/editormd.css"/>
<script src="static/js/jquery.js"></script>
<script src="static/editor/editormd.js" type="text/javascript"></script>
Markdown的实现
页面只需要放一个div和一个textarea标签即可，之后用JS来渲染。
HTML部分代码：
<div id="editormd">
<textarea id = "text" style="display:none;" ></textarea>
</div>
注意： div中的id是用来渲染Markdown编辑器时使用的，textarea是获取编辑器中内容时使用的。
JS部分代码
<script type="text/javascript">
$(function() {
editormd("editormd", {
width: "100%",
height: 600,
syncScrolling: "single",
path: "static/editor/lib/", //依赖lib文件夹路径
emoji: true,
taskList: true,
tocm: true,
imageUpload: true, //开启本地图片上传
imageFormats: ["jpg", "jpeg", "gif", "png"], //设置上传图片的格式
imageUploadURL: "notice/imgUpdate" //上传图片请求路径
});
});
</script>
注意： editormd为页面中div的id。
path: “static/editor/lib/”，需要指定到editor文件夹的lib路径。
imageUploadURL: “notice/imgUpdate”，设置上传图片的请求地址。
后台imgUpdate方法代码如下。
/**
* 图片上传
* @param file
* @return
*/
@RequestMapping("/imgUpdate")
@ResponseBody
public Map<String, Object> imgUpdate(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file){
String uuid = UUID.randomUUID().toString()+".jpg";
Boolean bool = fileService.saveFile(file, uuid);
Map<String, Object> map = new HashMap<>();
if(bool) {
map.put("success", 1);
map.put("message", "上传成功");
map.put("url", "http://localhost/layEdit/download?uuid="+uuid);
}else {
map.put("success", 0);
map.put("message", "失败");
}
return map;
}
/**
* 图片下载
* @param uuid
* @param request
* @param response
*/
@RequestMapping(value = "/download")
@ResponseBody
private void download(String uuid, HttpServletRequest request, HttpServletResponse response) {
fileService.download(uuid, request, response);
}
注： saveFile和download方法为图片上传和下载方法。
Markdown图片上传完成后需要返回对应格式的JSON信息。
message: 提示信息（字符串）
success: 上传成功或失败，1成功 | 0失败
url: 图片下载地址（用于图片回显）
至此完整的Markdown就完全实现了，效果如下：
获取内容
Markdown编辑器在我们写文章时已经把内容自动同步到了之前我们定义的textarea标签中了（这一块Markdown做的很好，有些编辑器还需要自己把内容同步到标签中）。
既然Markdown已经自动帮我们把内容同步到了textarea标签中了，那我们就可以直接通过textarea标签的id值获取textarea标签内的内容，即编辑器中内容。代码如下：
function btnSave() {
var text = $("#text").text();
console.log(text);
$.post("layEdit/save", {text: text}, function (result) {
layer.msg(result.msg, {offset: 'rb'});
});
}
在此方法中可以对内容进行保存，也可以使用form表单提交保存。
到这里，编辑器中的内容都已经获取到了，保存方法这里就不写了。
这里需要注意的是：由于富文本内容有可能过多，数据库保存该字段，不能用String类型，长度不够，MySQL数据库可以用longtext类型。
页面显示
上面我们也看到了，在保存数据时，我们保存到数据库中的是Markdown的语法，而并不是HTML语法，所以不能直接显示在页面上。
如何直接显示在页面上，后果则是：
显然不能直接显示在页面上，需要把Markdown的语法先转成HTML语法在显示。
那么问题来了，如何转呢？我们需要引入以下几个JS（都是Markdown插件中的文件）
<script src="../static/js/jquery.js"></script>
<script src="../static/editor/lib/marked.min.js"></script>
<script src="../static/editor/lib/prettify.min.js"></script>
<script src="../static/editor/lib/raphael.min.js"></script>
<script src="../static/editor/lib/underscore.min.js"></script>
<script src="../static/editor/lib/sequence-diagram.min.js"></script>
<script src="../static/editor/lib/flowchart.min.js"></script>
<script src="../static/editor/lib/jquery.flowchart.min.js"></script>
<script src="../static/editor/editormd.js"></script>
页面同样只需要div和textarea标签。之后通过JS来吧Markdown的语法转换为HTML语法显示。代码如下：
<div id="test">
<textarea style="display:none;" th:text="${model.text}"></textarea>
</div>
<script type="text/javascript">
editormd.markdownToHTML("test", {
htmlDecode: "style,script,iframe",
emoji: true,
taskList: true,
tex: true, // 默认不解析
flowChart: true, // 默认不解析
sequenceDiagram: true // 默认不解析
});
</script>
其中th:text="${model.text}"为后台传递过来的Markdown语法。
显示效果如下：
到这里Markdown的使用就讲完了。
创作不易，各位的点赞是对我最大的鼓励。欢迎下方留言交流，期待与各位的交流。