SimpleMDE編輯器 + 提取HTML + 美化輸出

• 這幾天在幫公司內部弄編輯器，以前是用wangEditor富文本編輯器的，也不能說別人插件很差什麼的，畢竟我是寫不出來的。不過wangEditor的縮進，是個無情的痛，會呼吸的痛。所以我找到了一款好用的markown編輯器——simpleMDE

---

• 可能你會跟我說，喲？那Editor.md呢？其實我也嘗試過Editor.md,我當時很喜歡它那個固定在窗口的工具欄，但細心點發現，它竟然是根據窗口寬度居中fixed定位的，而不是根據容器位置，這讓我很是尷尬，恰好simpleMDE妹紙完美繞過這個問題，還能夠全屏預覽和編輯，默認無預覽，因此我選擇了simpleMDE佳麗。固然讀者有更好的MDE也歡迎留言~

開發步驟：

1. 安裝和引入（npm或者bower均可以）

$ bower install simplemde --save

//css - debug目錄下爲開發版本 
<link rel="stylesheet" href="bower_components/simplemde/debug/simplemde.css" />
//js
<script src="/bower_components/simplemde/debug/simplemde.js"></script>

2. 部署DOM和編輯器初始化

<div class="form-group">
        <textarea name="field" id="fieldTest" cols="30" rows="10"></textarea>
    </div>

var simplemde = new SimpleMDE({
        element: document.getElementById("fieldTest"),
        autoDownloadFontAwesome: false,
        status: false
    });

參數：（不止如下3個，詳細請參考官方文檔https://github.com/sparksuite/simplemde-markdown-editor）

element: textarea的DOM對象
autoDownloadFontAwesome: 自動下載FontAwesome，設爲false爲不下載
status: 編輯器底部的狀態欄，我不須要就設置爲false了

這裏說明一下：

這個插件有點坑的地方就是UI,工具欄是用FontAwesome的圖標的，默認是在線獲取FontAwesome，然而在中國地區，下載7.9kb的FontAwesome竟然要10s，這讓人很不爽，因此autoDownloadFontAwesome這個參數咱們最好加上，而後切記，必定，記住安裝引入一下FontAwesome：

$ bower install fontawesome --save

<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />

若是成功的話，應該看到這樣的東西！

編輯器若有須要能夠加上css最小高度：

.CodeMirror, .CodeMirror-scroll {
  min-height: 300px;
}

3. 獲取內容及提取HTML

獲取內容使用simplemde.value()便可。不過獲取到的是帶markdown語法的字符串，因此咱們須要轉換一下變成HTML。
提取HTML真的，文檔我好像沒找到接口，不過通過分析simplemde.js,不經意地發現了一個渲染函數叫markdown(),是繼承到SimpleMDE裏面去的，也就是說，實例化的simplemde是有markdown方法的，一切就變得簡單了！

var testPlain = simplemde.value(), 
    testMarkdown = simplemde.markdown(testPlain);

而後testMarkdown就是咱們要的html了！該幹嗎幹嗎。

4. 美化渲染後的HTML

你會發現，獲取出來的HTML，很差看！誒，我已經幫大家從github那裏偷了個css回來了，拿去用即是。使用方法：

$ bower install github-markdown-css --save

<link rel="stylesheet" href="bower_components/github-markdown-css/github-markdown.css" />
//在輸出的地方加上markdown-body的css類便可
//下面的代碼是給編輯器預覽輸出的容器加的。
$(".editor-preview-side").addClass("markdown-body");

備註：這個css的font-family好像是沒有關於中文字體設置的，因此咱們要在裏面加上一個"Microsoft Yahei"。

最終效果圖以下：

有什麼錯誤的或者要改進的地方歡迎你們提出，但願文章對你們開發有幫助，謝謝~