开发步骤:
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");