最近項目中遇到了寫接口文檔，做OpenAPI的的記錄以便別人查看文檔，在網上看到Editor.md這個工具，在這里記錄一下，就當做筆記吧，如果有需要可以參考一下。
官網示例了解下：http://pandao.github.io/editor.md/examples/index.html

一、效果圖

先看效果圖了解下，是不是你想要的，如果適合就往下看吧，哈哈。
圖片

二、下載插件

項目地址：http://pandao.github.io/editor.md/
下載安裝包后放在相應的目錄中并引用

<link rel="stylesheet" href="lib/js/editor.md-master/css/editormd.css" />
//依賴jquery
<script type="text/javascript" src="lib/js/jquery.min.js"></script>
<script src="lib/js/editor.md-master/editormd.min.js"></script>
//需要這三個文件，自己對應好目錄哦

三、在自己的頁面中加上對應的id

<div id="layout" class="editor">
    <div id="test-editormd">
        <textarea></textarea>
    </div>
</div>

四、js代碼

主要就是說這個就是代碼，記得make一下

var testEditor;
testEditor = editormd("test-editormd", {
     placeholder:'本編輯器支持Markdown編輯，左邊編寫，右邊預覽',  //默認顯示的文字，這里就不解釋了
     width: "90%",
     height: 640,
     syncScrolling: "single",  
     path: "lib/js/editor.md-master/lib/",   //你的path路徑（原資源文件中lib包在我們項目中所放的位置）
     theme: "dark",//工具欄主題
     previewTheme: "dark",//預覽主題
     editorTheme: "pastel-on-dark",//編輯主題
     saveHTMLToTextarea: true,
     emoji: false,
     taskList: true, 
     tocm: true,         // Using [TOCM]
     tex: true,                   // 開啟科學公式TeX語言支持，默認關閉
     flowChart: true,             // 開啟流程圖支持，默認關閉
     sequenceDiagram: true,       // 開啟時序/序列圖支持，默認關閉,
     toolbarIcons : function() {  //自定義工具欄，后面有詳細介紹
         return editormd.toolbarModes['simple']; // full, simple, mini
      },
});
//上面的挑有用的寫上去就行

綜上所述一個編輯器就誕生了，下面有個小知識點。

testEditor.getMarkdown();
// 在js中調用getMarkdown這個方法可以獲得Markdown格式的文本。

五、頁面展示Markdown文檔

后臺給我們的文檔我們要展示成轉換后的樣子不能一大堆符號擺在頁面上是吧，也不好看呀，所以下面放上展示代碼需要的東東。

1. 首先引入必要JS（下面不是所有的都必要）

   <link rel="stylesheet" href="lib/js/editor.md-master/css/editormd.css" />
   <link rel="shortcut icon"  type="image/x-icon" />
   <script src="lib/js/jquery.min.js""></script>
   <script src="lib/js/editor.md-master/lib/marked.min.js"></script>
   <script src="lib/js/editor.md-master/lib/prettify.min.js"></script>
   <script src="lib/js/editor.md-master/lib/raphael.min.js"></script>
   <script src="lib/js/editor.md-master/lib/underscore.min.js"></script>
   <script src="lib/js/editor.md-master/lib/sequence-diagram.min.js"></script>
   <script src="lib/js/editor.md-master/lib/flowchart.min.js"></script>
   <script src="lib/js/editor.md-master/editormd.min.js"></script>
   //具體目錄在你下載的文件里都能找到，對號入座

2. 頁面的div

 <div id="layout"  class="editor">
    <div id="test-editormd" >
        <textarea></textarea>
    </div>
 </div>

3. js代碼

testEditor = editormd.markdownToHTML("test-editormd", {
      markdown:$scope.apidetails.content,
      htmlDecode      : "style,script,iframe",  // you can filter tags decode
      emoji           : true,
      taskList        : true,
      tex             : true,  // 默認不解析
      flowChart       : true,  // 默認不解析
      sequenceDiagram : true,  // 默認不解析
});

六、自定義工具欄

工具欄分為三組，full, simple, mini這三個，可以選擇，如果想更加自由選你所需，就可以用下面的代碼，也可以看看官網的示例

toolbarIcons : function() {
            // Or return editormd.toolbarModes[name]; // full, simple, mini
            // Using "||" set icons align right.
            return ["undo", "redo", "|", "bold", "hr"]
        },

具體沒一個標簽代表的什么含義可以對照整個工具欄自己對一下，下面是他的源碼

t.toolbarModes={
    full:["undo","redo","|","bold","del","italic","quote","ucwords","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","link","reference-link","image","code","preformatted-text","code-block","table","datetime","emoji","html-entities","pagebreak","|","goto-line","watch","preview","fullscreen","clear","search","|","help","info"],
    simple:["undo","redo","|","bold","del","italic","quote","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","watch","preview","fullscreen","|","help","info"],
    mini:["undo","redo","|","watch","preview","|","help","info"]
}