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

最终效果图以下：

有什么错误的或者要改进的地方欢迎你们提出，但愿文章对你们开发有帮助，谢谢~