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

最终效果图如下：

有什么错误的或者要改进的地方欢迎大家提出，希望文章对大家开发有帮助，谢谢~