editor.md實現Markdown編輯器
Markdown和Editor.md簡介
Markdwon編輯器在技術工作者圈子中已經越來越流行，簡單的語法，統一的格式，強大的擴展功能，最重要的是：你可以用Markdown，設計一篇精彩絕倫的文檔而完全不需要將你的右手從鍵盤上移到鼠標上去，這是我和很多編程工作者最熱愛的。長期使用Leanote的原因，也是基於有着強大的WEB端和客戶端的Markdown編輯器（個人甚至偏向於客戶端Leanote）。
Editor.md 是國人開發的開源在線Markdown編輯器，單純基於前端JavaScript，無需后台代碼加持，適用於任何語言（僅在上傳圖片功能時需要一點后台代碼與之配合，其余都交給Editor.md吧），因為是中國人開發的，對中文支持得相當到位。在我的個人博客設計過程中，相當長一段時間都是使用的百度的ueditor作為文檔編輯器，說實話，配置那玩意兒相當繁瑣，而要想把ueditor配置得符合自己心意更是煩上加煩。在經歷了一次SpringMVC與ueditor上傳組件沖突的bug后，有種徹底想放棄ueditor的沖動。
長期使用Leanote的Markdown編輯器的我，苦苦尋求一種能取代ueditor的Markdown編輯器，Editor.md 正是我想要的。
Editor.md的安裝使用
1.基本使用及表單提交
基本使用markdown是相當簡單的，比ueditor還要簡單，從git上下載回來的Editor.md是1.5版，壓縮包里有分門別類詳細的文件夾。
在examples文件夾中有一個簡單的示例simple.html，可以在瀏覽器里打開，並查看源代碼，我這里做一個簡單的總結，並加上表單提交的配置：
- 在HTML中加載CSS：editormd.css
- 在HTML中加載JS：順序為jQuery，editormd.min.js，
-
在HTML中寫一個div節點,包含兩個textarea，格式如下：
<div class="editormd" id="test-editormd"> <textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc"></textarea> <!-- 第二個隱藏文本域，用來構造生成的HTML代碼，方便表單POST提交，這里的name可以任意取，后台接受時以這個name鍵為准 --> <textarea class="editormd-html-textarea" name="text"></textarea> </div> -
在HTML中寫一句javascript：
<script type="text/javascript"> $(function() { editormd("test-editormd", { width : "90%", height : 640, syncScrolling : "single", //你的lib目錄的路徑，我這邊用JSP做測試的 path : "<%=request.getContextPath()%>/resources/editormd/lib/", //這個配置在simple.html中並沒有，但是為了能夠提交表單，使用這個配置可以讓構造出來的HTML代碼直接在第二個隱藏的textarea域中，方便post提交表單。 saveHTMLToTextarea : true }); }); </script>OK，這樣就完成了一個最簡單的editor.md的編輯器了，你可以在這里面書寫你熟悉的Markdown文檔，里面可以包含代碼，右側有實時的預覽。如圖所示：
2.圖片上傳
有了基本的Markdown功能，集成editor.md就完成了一半了，下面開始處理圖片上傳。
圖片上傳的語法是,這個用來嵌入互聯網上現成的圖片是很方便的，但是如果想要上傳本地圖片就要后台代碼配合了，我下面以JAVA為例（官方文檔有PHP的示例），配合SpringMVC和commons-fileupload-1.3.1.jar，簡單給個DEMO：
根據Editor.md的官方文檔介紹，上傳圖片功能需要添加一點配置，如下：editormd("test-editormd", { width : "90%", height : 640, syncScrolling : "single", path : "<%=request.getContextPath()%>/resources/editormd/lib/", imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "/uploadfile", saveHTMLToTextarea : true, }); //editor.md期望得到一個json格式的上傳后的返回值，格式是這樣的： /* { success : 0 | 1, // 0 表示上傳失敗，1 表示上傳成功 message : "提示的信息，上傳成功或上傳失敗及錯誤信息等。", url : "圖片地址" // 上傳成功時才返回 } */以上代碼並不難理解，也就加了三行配置，關鍵的是
imageUploadURL : "/uploadfile"這個配置，這里的URL指向了你處理圖片上傳的action，與之對應的，我的SpringMVC控制器是這樣的，這里貼出了整個代碼，防止有小伙伴對JAVA以及SpringMVC處理文件上傳還不太熟練：package com.newflypig.jblog.controller; import java.io.File; import java.io.IOException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.io.FileUtils; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.multipart.MultipartFile; @Controller public class UploadController { @RequestMapping(value="/uploadfile",method=RequestMethod.POST) public void hello(HttpServletRequest request,HttpServletResponse response,@RequestParam(value = "editormd-image-file", required = false) MultipartFile attach){ try { request.setCharacterEncoding( "utf-8" ); response.setHeader( "Content-Type" , "text/html" ); String rootPath = request.getSession().getServletContext().getRealPath("/resources/upload/"); /** * 文件路徑不存在則需要創建文件路徑 */ File filePath=new File(rootPath); if(!filePath.exists()){ filePath.mkdirs(); } //最終文件名 File realFile=new File(rootPath+File.separator+attach.getOriginalFilename()); FileUtils.copyInputStreamToFile(attach.getInputStream(), realFile); //下面response返回的json格式是editor.md所限制的，規范輸出就OK response.getWriter().write( "{\"success\": 1, \"message\":\"上傳成功\",\"url\":\"/resources/upload/" + attach.getOriginalFilename() + "\"}" ); } catch (Exception e) { try { response.getWriter().write( "{\"success\":0}" ); } catch (IOException e1) { e1.printStackTrace(); } } } }這樣就完成了圖片上傳了，上傳后，后台action返回了一個url給editor.md，editor.md使用這個url作為你嵌套在文檔中的圖片url。
這樣就大功告成了，是不是很爽，要比ueditor的上傳配置簡單100倍。3.Editor.md代碼黑色主題
用慣了sublime text等編輯器，是不是對代碼的渲染有點要求呢，先上博主兩個IDE的截圖吧，一個是sublime text3，一個是myeclipse2015：
習慣了黑色背景的代碼樣式，就希望editor.md也能實現代碼黑色樣式，果然，editor.md從1.5版本以后為大家提供了dark樣式主題，但是會讓除代碼以外的其他編輯區域也變黑色，所以根據個人需要來小小的改造一下： -
首先添加樣式配置，在原來的editor.md配置基礎上，添加配置項：
$(function() { editormd("test-editormd", { width : "90%", height : 640, syncScrolling : "single", path : "<%=request.getContextPath()%>/resources/editormd/lib/", imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "/uploadfile", saveHTMLToTextarea : true, //下面這一行將使用dark主題 previewTheme : "dark" }); });配置好dark主題以后，編輯區還是原來的編輯區，預覽區已經使用了暗黑模式，但是代碼以外的部分也都變成黑色背景了，這不是我想要的，所以我對editormd.css做了一些修正，將dark主題代碼以外的部分取消了樣式定義，這樣預覽起來只有代碼塊是暗黑模式，截圖如下：
修改了editormd.css后，別忘了使用CSS壓縮工具再壓縮一遍，生成editormd.min.css，這樣正式部署時能減輕一點服務器壓力，提高加載效率。我把壓縮好重新生成的editormd.min.css放出來，有需要的可以直接下載。
editormd.min.css4. 文檔的顯示
編輯區的代碼格式已經調整成為我們喜歡的樣式了，在表單POST提交時，editormd將我們的markdown語法文檔翻譯成了HTML語言，並將html字符串提交給了我們的后台，后台應該將這些HTML字符串持久化到數據庫中，在文章顯示時將他們顯示在頁面上。
具體的做法是：<link rel="stylesheet" href="<%=request.getContextPath()%>/resources/editormd/css/editormd.preview.min.css" /> <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/editormd/css/editormd.css" /> <!-- 因為我們使用了dark主題，所以在容器div上加上dark的主題類，實現我們自定義的代碼樣式 --> <div class="content editormd-preview-theme-dark" id="content">${article.text }</div> <script src="<%=request.getContextPath()%>/resources/js/jquery.min.js"></script> <script src="<%=request.getContextPath()%>/resources/editormd/lib/marked.min.js"></script> <script src="<%=request.getContextPath()%>/resources/editormd/lib/prettify.min.js"></script> <script src="<%=request.getContextPath()%>/resources/editormd/editormd.min.js"></script> <script type="text/javascript"> editormd.markdownToHTML("content"); </script>至此，我們所有的工作都完成了。（另外還有些editor.md高級功能，比如[TOC]標簽自動生成文檔目錄結構、流程圖語法等，我還沒研究，不過現在已經滿足我的所有要求了，感興趣的朋友可以繼續閱讀examples文件夾中各種示例。）
如果您各項基礎知識掌握得都還可以的話，將editor.md這個編輯器引入你的項目是相當輕松加愉快的。寫這篇blog也確實因為對這個編輯器的喜愛，加上官方尚未有一個系統的cookbook，都是一個個小demo，希望能幫到想使用editor.md的朋友。