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

開發步驟：

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"。

最終效果圖如下：