最近項目中需要一個新聞管理的功能，就想到了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的使用就講完了。
創作不易，各位的點贊是對我最大的鼓勵。歡迎下方留言交流，期待與各位的交流。