Markdown編輯器editor.md的使用

一、Markdown和editor.md簡介：

Markdown在技術圈裡（估計更多是程式猿吧）越來越流行。簡單的文法，統一的格式，使用過程中，手基本上不用從鍵盤上移到滑鼠上去，超級方便。寫好了一篇md文檔(也就是含Markdown文法格式的普通TXT檔案)，可以隨意放到別的支援Markdown格式的網站上發布。

editor.md是國內開源的一款線上Markdown編輯器，單純基於前端JavaScript實現，和後端什麼語言無關。這個還可以畫流程圖，以及數學公式。官網Demo樣本使用的是PHP語言，我後端使用的是Java，Springmvc。

如下記錄我在個人開源項目17Smart中使用的方法和過程。17Smart源碼目前託管在Github上，感興趣的可以參考瞭解。 二、editor.md的使用： 2.1、下載：

我們可以從其官網中找到下載最新版V1.5.0，解壓資源套件如下圖：
>1.examples檔案中是使用PHP做的所有樣本(可以在文檔編輯器裡開啟，並查看原始碼)； >2.lib中是editor.md所依賴的第三方js資源； >3.plugins中是如emoji表情支援、代碼格式化等外掛程式； 2.2、簡單使用：

將上面的解壓的editormd資源檔拷貝（選取需要的）到我們的項目適合目錄下面。 2.2.1、在自己的頁面上引入相關的css和js，代碼如下：

<link rel="stylesheet"href="/smart-api/htdocs/mdeditor/css/editormd.css" /><script src="/smart-api/htdocs/mdeditor/js/jquery.min.js"></script><script src="/smart-api/htdocs/mdeditor/js/editormd.min.js"></script>

2.2.2、在自己的頁面中加上DIV：

DIV的id為my-editormd（這個div在form表單中）。DIV中包含二個textarea，其實官方demo中只有一個，第二個是否方便我們POST提交時，後端可以擷取到md文檔內容，如java中request.getParameter("my-editormd-html-code")。

<div id="my-editormd" ><textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"></textarea><!-- 注意：name屬性的值--><textarea id="my-editormd-html-code" name="my-editormd-html-code" style="display:none;"></textarea></div>

這裡值得注意兩點： >1.後端要想獲得第二個textarea中的值，首先需要開啟editor.md的saveHTMLToTextarea : true設定（見下面）； >2.textarea中name屬性值，應該跟著div的IDmy-editormd值來定，即$-html-code（剛開始，後端死活擷取不到值，翻看了源碼才知道） 2.2.3、在同頁面中再加上如下JS代碼：

<script type="text/javascript">  $(function() {      editormd("my-editormd", {//注意1：這裡的就是上面的DIV的id屬性值          width   : "90%",          height  : 640,          syncScrolling : "single",          path    : "/smart-api/htdocs/mdeditor/lib/",//注意2：你的路徑          saveHTMLToTextarea : true//注意3：這個配置，方便post提交表單      });  });</script>

這裡值得注意三點： >1.注意1：這裡的就是上面的DIV的id屬性值； >2.注意2：你的path路徑（原資源檔中lib包在我們項目中所放的位置）； >3.注意3：saveHTMLToTextarea 設定true或false關乎後端是否可以擷取到值；

這樣我們就完成了一個最簡單的editor.md的編輯器了，我們可以在這裡面書寫自己熟悉的Markdown文檔，包括代碼，右側有即時預覽。 2.3、上傳圖片：

上面最簡單的editor.md的編輯器，目前還是不可以上傳圖片的。我們需要略作配置修改，還是很簡單的。

我們都知道在編寫Markdown文檔時，圖片文法是。可是，往往我們需要上傳本地圖片。在上面的基礎之上，略做如下修改即可（當然後端的代碼得自己寫）：

<script type="text/javascript">  $(function() {      editormd("my-editormd", {//注意1：這裡的就是上面的DIV的id屬性值          width   : "90%",          height  : 640,          syncScrolling : "single",          path    : "/smart-api/htdocs/mdeditor/lib/",//注意2：你的路徑          saveHTMLToTextarea : true,//注意3：這個配置，方便post提交表單         /**上傳圖片相關配置如下*/         imageUpload : true,         imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],         imageUploadURL : "/smart-api/upload/editormdPic/",//注意你後端的上傳圖片服務地址      });  });</script>

注意：editor.md期望你上傳圖片的服務返回如下json格式的內容

{    success : 0 | 1, //0表示上傳失敗;1表示上傳成功    message : "提示的資訊",    url     : "圖片地址" //上傳成功時才返回}

我的後台使用的是springmvc，代碼如下:
（注意：@RequestParam(value = "editormd-image-file", required = true註解）

@RequestMapping("editormdPic")@ResponseBodypublic JSONObject editormdPic (@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request,HttpServletResponse response) throws Exception{        String trueFileName = file.getOriginalFilename();          String suffix = trueFileName.substring(trueFileName.lastIndexOf("."));        String fileName = System.currentTimeMillis()+"_"+CommonUtils.getRandomNumber(100, 999)+suffix;          String path = request.getSession().getServletContext().getRealPath("/assets/msg/upload/");        System.out.println(path);          File targetFile = new File(path, fileName);          if(!targetFile.exists()){             targetFile.mkdirs();          }         //儲存          try {             file.transferTo(targetFile);          } catch (Exception e) {             e.printStackTrace();          }          JSONObject res = new JSONObject();        res.put("url", Constant.WEB_ROOT+"assets/msg/upload/"+fileName);        res.put("success", 1);        res.put("message", "upload success!");        return res;    }

2.4、Markdown文檔頁面展示：

上面我們通過post提交，後端擷取到MD文檔內容後，往往存在資料庫中，然後在頁面展示時，我們需要把MD文法文檔，轉換為HTML文法（也可以先轉換為標準的HTML儲存，但我覺得先轉換的話，會佔用較多儲存空間）。

首先引入必要JS（下面不是所有必要）：

<script src="/smart-api/htdocs/mdeditor/js/jquery.min.js"></script><script src="/smart-api/htdocs/mdeditor/lib/marked.min.js"></script><script src="/smart-api/htdocs/mdeditor/lib/prettify.min.js"></script><script src="/smart-api/htdocs/mdeditor/lib/raphael.min.js"></script><script src="/smart-api/htdocs/mdeditor/lib/underscore.min.js"></script><script src="/smart-api/htdocs/mdeditor/lib/sequence-diagram.min.js"></script><script src="/smart-api/htdocs/mdeditor/lib/flowchart.min.js"></script><script src="/smart-api/htdocs/mdeditor/lib/jquery.flowchart.min.js"></script><script src="/smart-api/htdocs/mdeditor/js/editormd.min.js"></script>

然後，本頁面中，加入如下DIV：

<div id="doc-content">    <textarea style="display:none;">${message.detail }</textarea></div>

最後，再引入如下JS代碼：

<script type="text/javascript">    var testEditor;    $(function () {        testEditor = editormd.markdownToHTML("doc-content", {//注意：這裡是上面DIV的id            htmlDecode: "style,script,iframe",            emoji: true,            taskList: true,            tex: true, // 預設不解析            flowChart: true, // 預設不解析            sequenceDiagram: true, // 預設不解析            codeFold: true,    });}); </script>

三、editor.md的更多配置項：

這配置，可以根據官方提供的Demo和源碼找到（editor.md-master/examples目錄下面）。如，佈景主題色彩設定；上傳圖片後的特殊處理等。

    <script type="text/javascript">            var myEditor;            $(function() {                myEditor = editormd("my-editormd", {                    width   : "90%",                    height  : 800,                    syncScrolling : "single",                    path    : "/smart-api/htdocs/mdeditor/lib/",                    saveHTMLToTextarea : true,                    emoji: true,//emoji表情，預設關閉                    taskList: true,                    tocm: true, // Using [TOCM]                    tex: true,// 開啟科學公式TeX語言支援，預設關閉                    flowChart: true,//開啟流程圖支援，預設關閉                    sequenceDiagram: true,//開啟時序/順序圖表支援，預設關閉,                    dialogLockScreen : false,//設定彈出層對話方塊不鎖屏，全域通用，預設為true                    dialogShowMask : false,//設定彈出層對話方塊顯示透明遮罩層，全域通用，預設為true                    dialogDraggable : false,//設定彈出層對話方塊不可拖動，全域通用，預設為true                    dialogMaskOpacity : 0.4, //設定透明遮罩層的透明度，全域通用，預設值為0.1                    dialogMaskBgColor : "#000",//設定透明遮罩層的背景顏色，全域通用，預設為#fff                    codeFold: true,                    imageUpload : true,                    imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],                    imageUploadURL : "/smart-api/upload/editormdPic/",                    /*上傳圖片成功後可以做一些自己的處理*/                    onload: function () {                        //console.log('onload', this);                        //this.fullscreen();                        //this.unwatch();                        //this.watch().fullscreen();                        //this.width("100%");                        //this.height(480);                        //this.resize("100%", 640);                    },                    /**設定佈景主題色彩*/                    editorTheme: "pastel-on-dark",                    theme: "gray",                    previewTheme: "dark"                });            });        </script>

四、網站&源碼： 網站：17Smart 源碼：Github eBook：《深入剖析Tomcat》