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

最终效果图如下：