最近項(xiàng)目中遇到了寫(xiě)接口文檔，做OpenAPI的的記錄以便別人查看文檔，在網(wǎng)上看到Editor.md這個(gè)工具，在這里記錄一下，就當(dāng)做筆記吧，如果有需要可以參考一下。
官網(wǎng)示例了解下：http://pandao.github.io/editor.md/examples/index.html
一、效果圖
先看效果圖了解下，是不是你想要的，如果適合就往下看吧，哈哈。
圖片
二、下載插件
項(xiàng)目地址：http://pandao.github.io/editor.md/
下載安裝包后放在相應(yīng)的目錄中并引用
<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>
//需要這三個(gè)文件，自己對(duì)應(yīng)好目錄哦
三、在自己的頁(yè)面中加上對(duì)應(yīng)的id
<div id="layout" class="editor">
<div id="test-editormd">
<textarea></textarea>
</div>
</div>
四、js代碼
主要就是說(shuō)這個(gè)就是代碼，記得make一下
var testEditor;
testEditor = editormd("test-editormd", {
placeholder:'本編輯器支持Markdown編輯，左邊編寫(xiě)，右邊預(yù)覽', //默認(rèn)顯示的文字，這里就不解釋了
width: "90%",
height: 640,
syncScrolling: "single",
path: "lib/js/editor.md-master/lib/", //你的path路徑（原資源文件中l(wèi)ib包在我們項(xiàng)目中所放的位置）
theme: "dark",//工具欄主題
previewTheme: "dark",//預(yù)覽主題
editorTheme: "pastel-on-dark",//編輯主題
saveHTMLToTextarea: true,
emoji: false,
taskList: true,
tocm: true, // Using [TOCM]
tex: true, // 開(kāi)啟科學(xué)公式TeX語(yǔ)言支持，默認(rèn)關(guān)閉
flowChart: true, // 開(kāi)啟流程圖支持，默認(rèn)關(guān)閉
sequenceDiagram: true, // 開(kāi)啟時(shí)序/序列圖支持，默認(rèn)關(guān)閉,
toolbarIcons : function() { //自定義工具欄，后面有詳細(xì)介紹
return editormd.toolbarModes['simple']; // full, simple, mini
},
});
//上面的挑有用的寫(xiě)上去就行
綜上所述一個(gè)編輯器就誕生了，下面有個(gè)小知識(shí)點(diǎn)。
testEditor.getMarkdown();
// 在js中調(diào)用getMarkdown這個(gè)方法可以獲得Markdown格式的文本。
五、頁(yè)面展示Markdown文檔
后臺(tái)給我們的文檔我們要展示成轉(zhuǎn)換后的樣子不能一大堆符號(hào)擺在頁(yè)面上是吧，也不好看呀，所以下面放上展示代碼需要的東東。
- 首先引入必要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>
//具體目錄在你下載的文件里都能找到，對(duì)號(hào)入座
- 頁(yè)面的div
<div id="layout" class="editor">
<div id="test-editormd" >
<textarea></textarea>
</div>
</div>
- 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, // 默認(rèn)不解析
flowChart : true, // 默認(rèn)不解析
sequenceDiagram : true, // 默認(rèn)不解析
});
六、自定義工具欄
工具欄分為三組，full, simple, mini這三個(gè)，可以選擇，如果想更加自由選你所需，就可以用下面的代碼，也可以看看官網(wǎng)的示例
toolbarIcons : function() {
// Or return editormd.toolbarModes[name]; // full, simple, mini
// Using "||" set icons align right.
return ["undo", "redo", "|", "bold", "hr"]
},
具體沒(méi)一個(gè)標(biāo)簽代表的什么含義可以對(duì)照整個(gè)工具欄自己對(duì)一下，下面是他的源碼
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"]
}
