前言：

幾天前，集成了百度的ueditor，感覺不符合現代前端的審美邏輯，並且肥胖，pass了，偶然發現editormd，覺得美滋滋，一路踩坑下來，特此記錄
editormd:支援 AMD / CMD 模組化載入（支援 Require.js & Sea.js），並且支援自定義擴充套件外掛；

傳送門：editormd下載地址
這裡有個坑，之前下載了-java版本-php版本，整合有問題

開始

1、複製editormd資料夾到專案，static資料夾為靜態資源目錄，spring已經將static靜態化，精簡的目錄結構如下：

2、引入css、js、html，注意相對路徑

<link rel="stylesheet" href="../../../static/css/editormd.min.css"/>

<script src="../../../static/js/editormd.min.js" type="text/javascript"></script>

<div id="editormd">
    <textarea style="display:none;" name="markdownContent"></textarea>
</div>

3、js配置、初始化，注意:

// editormd 配置
var editormd_Ins;
editormd_Ins = editormd("editormd", {
    width: "100%",
    height: 640,
    syncScrolling: "single",
    path: "../../../static/editormd/lib/",
    saveHTMLToTextarea: true, //注意3：這個配置，方便post提交表單
    //開啟圖片上傳
    imageUpload: true,
    imageFormats: ["jpg", "jpeg"
 
, "gif", "png", "bmp", "webp"],
    imageUploadURL: "/imageUpload",//圖片介面
});

4、圖片上傳介面後臺java程式碼
注意1：如果使用idea打包war，這時候get圖片會404，因為idea是虛擬了一個tomcat，如果想要正常get，手動startup.bat
注意2：@RequestParam(value = "editormd-image-file", required = true，引數不要動

/**
 * editormd上傳圖片
 *
 * @param file
 * @param request
 * @return
 */
@RequestMapping("/imageUpload")
@ResponseBody
public JSONObject imageUpload(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request) {
    //路徑
    String path = request.getSession().getServletContext().getRealPath("/");
    //使用硬碟路徑替代path，防止重新部署Tomcat專案圖片丟失，此處tomcat已經docbase指向了"D:/"
    path = "D:/";
    //儲存相對路徑，解決同源問題
    String relativePath = "editorImg/";
    //檔名
    String trueFileName = file.getOriginalFilename();
    //字尾名
    String suffix = trueFileName.substring(trueFileName.lastIndexOf("."));
    //重新命名
    String fileName = System.currentTimeMillis() + "_" + CommonUtil.getRandomNumber(100, 999) + suffix;
    //io
    File targetFile = new File(path+relativePath, fileName);
    if (!targetFile.exists()) {
        targetFile.mkdirs();
    }
    //儲存
    try {
        file.transferTo(targetFile);
    } catch (Exception e) {
        e.printStackTrace();
    }
    //返回給前端
    JSONObject res = new JSONObject();
    res.put("url", "../"+relativePath + fileName);
    res.put("success", 1);
    res.put("message", "upload success!");
    return res;
}

5、常用兩個方法

//editormd_Ins 步驟3中editormd例項化物件
//獲得markdown格式的文字
editormd_Ins.getMarkdown()
//獲得html原始碼
editormd_Ins.getHTML()

6、資料回顯
常規而言分為兩種場景：
1、動態建立，即編輯狀態

<div id="test-editormd">
   <textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>               
</div>

//動態建立
testEditormd = editormd("test-editormd", {
    width: "90%",
    height: 640,
    markdown : "### 動態建立 Editor.md\r\n\r\nDynamic create Editor.md",
    path : '../lib/'//注意lib的路徑指向
});

2、靜態建立，即非編輯狀態，轉HTML輸出頁面

<div id="test-editormd-view">
   <textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>               
</div>

//靜態建立方法：
testEditormdView = editormd.markdownToHTML("test-editormd-view", {
    markdown        : markdown ,//+ "\r\n" + $("#append-test").text(),
    //htmlDecode      : true,       // 開啟 HTML 標籤解析，為了安全性，預設不開啟
    htmlDecode      : "style,script,iframe",  // you can filter tags decode
    //toc             : false,
    tocm            : true,    // Using [TOCM]
    //tocContainer    : "#custom-toc-container", // 自定義 ToC 容器層
    //gfm             : false,
    //tocDropdown     : true,
    // markdownSourceCode : true, // 是否保留 Markdown 原始碼，即是否刪除儲存原始碼的 Textarea 標籤
    emoji           : true,
    taskList        : true,
    tex             : true,  // 預設不解析
    flowChart       : true,  // 預設不解析
    sequenceDiagram : true,  // 預設不解析
});