SimpleMDE编辑器 + 提取HTML + 美化输出

2019年8月25日 211次阅读 来源: 栋梁

  • 这几天在帮公司内部弄编辑器，之前是用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" />

假如胜利的话，应当看到如许的东西！

《SimpleMDE编辑器 + 提取HTML + 美化输出》

编辑器若有须要能够加上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”。

终究效果图以下：

《SimpleMDE编辑器 + 提取HTML + 美化输出》

有什么毛病的或许要革新的处所迎接人人提出，愿望文章对人人开辟有协助，感谢~

    原文作者：栋梁
    原文地址: https://segmentfault.com/a/1190000009469890
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞