java中集成Markdown富客戶端
雖然在項(xiàng)目中，可能很少會給客戶用到Markdown編輯器，畢竟你不能指望最終用戶會明白這些語法，但假如是做一個自用的系統(tǒng)，比如自己的一個blog，那么集成一個Markdown還是會顯著的方便好多，在Java的web項(xiàng)目中，集成一個Markdown編輯器還是很方便的
背景
舉例的系統(tǒng)的架構(gòu)為SpringMVC，模板框架使用的為Thymeleaf，這種情況下，集成Markdown超級方便
下載
editor.md是一款非常好用的開源在線 Markdown 編輯器，集成Markdown主要就通過他來實(shí)現(xiàn)
集成
下載后，需要把相關(guān)的文件復(fù)制到項(xiàng)目中，需復(fù)制目錄如下：
其中examples和docs顧名思義即為樣例和文檔文件，可以不考，
然后在頁面內(nèi)，首先引用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>
<!-- 第二個隱藏文本域，用來構(gòu)造生成的HTML代碼，方便表單POST提交，這里的name可以任意取，后臺接受時以這個name鍵為準(zhǔn) -->
<!-- html textarea 需要開啟配置項(xiàng) 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,//關(guān)閉圖片上傳功能
emoji: false,
taskList: true,
tocm: true, // Using [TOCM]
tex: true, // 開啟科學(xué)公式TeX語言支持，默認(rèn)關(guān)閉
flowChart: true, // 開啟流程圖支持，默認(rèn)關(guān)閉
sequenceDiagram: true, // 開啟時序/序列圖支持，默認(rèn)關(guān)閉,
saveHTMLToTextarea : true
});
});
這樣，最終的效果如下：
寫入測試內(nèi)容后：
提交后后臺打印提交輸入如下：
測試標(biāo)題
<h2 id="h2-u4E8Cu7EA7u6807u9898"><a name="二級標(biāo)題" class="reference-link"></a><span class="header-link octicon octicon-link"></span>二級標(biāo)題</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";
}
設(shè)置工具欄
自定義工具欄可以在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"]
},
分別使用名字對應(yīng)響應(yīng)的圖標(biāo)，具體配置方式參閱文檔。其中"|"表示分隔符
