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

elliott_hu 发布于2019-08-20 16:39 / 1004人阅读

摘要：不过的缩进，是个无情的痛，会呼吸的痛。使用方法在输出的地方加上的类即可下面的代码是给编辑器预览输出的容器加的。

这几天在帮公司内部弄编辑器，之前是用wangEditor富文本编辑器的，也不能说别人插件不好什么的，毕竟我是写不出来的。不过wangEditor的缩进，是个无情的痛，会呼吸的痛。因此我找到了一款好用的markown编辑器——simpleMDE

可能你会跟我说，哟？那Editor.md呢？其实我也尝试过Editor.md,我当时很喜欢它那个固定在窗口的工具栏，但细心点发现，它居然是根据窗口宽度居中fixed定位的，而不是根据容器位置，这让我非常尴尬，刚好simpleMDE妹纸完美绕过这个问题，还可以全屏预览和编辑，默认无预览，所以我选择了simpleMDE佳丽。当然读者有更好的MDE也欢迎留言~

开发步骤： 1. 安装和引入（npm或者bower都可以）

$ bower install simplemde --save

//css - debug目录下为开发版本 

//js

2. 部署DOM和编辑器初始化

    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

如果成功的话，应该看到这样的东西！

编辑器如有需要可以加上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


//在输出的地方加上markdown-body的css类即可
//下面的代码是给编辑器预览输出的容器加的。
$(".editor-preview-side").addClass("markdown-body");

备注：这个css的font-family好像是没有关于中文字体设置的，所以我们要在里面加上一个"Microsoft Yahei"。 最终效果图如下：

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

GPU云服务器云服务器 html美化 html的美化 html美化文字 html美化表格代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83071.html

vue中利用simplemde实现markdown编辑器（增加图片上传功能）

摘要：前言最近在搭个人博客网站，需要一个编辑器，来进行博客的编写看了网上的教程，决定使用以为可以直接能拿来用的不过实际运用的时候发现还是有要完善的地方比如令人头疼的图片上传最终效果安装及初始化在中加入一个在的生命周期函数中，添加的实例化通过指前言最近在搭个人博客网站，需要一个markdown编辑器，来进行博客的编写看了网上的教程，决定使用simplemde以为可以直接能拿来用的不过实际运...

fobnn 2019-08-23 17:12 评论0 收藏0
SimpleMDE.JS 轻松打造一个类似简书的纯前端MarkDown语法编辑器

摘要：一直想搞一个纯前端的编辑器解析器。将个人博客的文章语法用实现。试了多个纯前端库以后，感觉的用法最简单，效果也与简书等最为接近。最终效果演示最终源码下载入门款只需要引入一个标签即可。从而大幅缩减开发时间和编辑文章的时间。 showImg(https://segmentfault.com/img/remote/1460000018021241); 一直想搞一个纯前端的markdown编辑器...

netScorpion 2019-08-23 14:58 评论0 收藏0
js拖拽粘贴上传与CodeMirror

摘要：属性介绍默认是默认是在粘贴操作时为空剪切板中的各项数据剪切板中的数据类型。避免重复创建上传中文件成功失败处理已上传上传出错添加文件到队列并上传开始上传其他参考获取剪切板内容，控制图片粘贴在线代码编辑器事件说明 Markdown编辑器选用https://simplemde.com它是一款纯js实现的markdown编辑器。缺点不支持图片上传。那我们就得改造它。simplemde是基于co...

FullStackDeveloper 2019-08-20 12:09 评论0 收藏0
react 搭建博客---支持markdown的富文本编辑器

摘要：最近在学，准备配合搭个博客，找了很多富文本编辑器，都不是很适合用，后来看到一篇搭建博客的文章，里面使用的地址，完全就符合我的想法啊，界面简洁大方还有预览功能。最近在学nodejs，准备配合react+mongodb搭个博客，找了很多富文本编辑器，都不是很适合react用，后来看到一篇vue+node搭建博客的文章，里面使用的simplemde(github地址)，完全就符合我的想法啊...

tylin 2019-08-21 11:52 评论0 收藏0
React 历史项目维护与优化实践

摘要：本文介绍了作者接手维护一个中型历史项目时的一系列改进实践，包括模块结构拆分业务逻辑梳理打包优化等。代码中如菜单名称结构表单字段名等的各种硬编码配置分散在各处。最后，在提升面向开发者的打包体验方面，本次优化中主要实现的是与的解耦。本文介绍了作者接手维护一个中型 React 历史项目时的一系列改进实践，包括模块结构拆分、业务逻辑梳理、Webpack 打包优化等。背景这是一个 PC 的...

toddmark 2019-08-20 16:50 评论0 收藏0