【武汉-第146期】如何使用富文本编辑器

1.背景介绍

1.1什么是富文本编辑器

在做Web应用时，经常会进行富文本编辑，常用的富文本编辑器有很多， 比如CuteEditor、CKEditor、NicEditor、KindEditor、UEditor等等。 好的富文本编辑器可以让我们用户有更好的体验效果，带来更多的用户好评。

1.2Meditor

今天给大家介绍一款轻量级的文本编辑器，实际上是markdown编辑器，即把文本的格式用 markdown语法表示出来，进行网络传输。这个编辑器的有点是引用非常简单，轻量级，转化为 的markdown格式可以把文本格式占用的存储空间降低很多，非常易于网络传输，后面会简单介绍 一下markdown语法

2.知识剖析

2.1步骤一：引入 Mditor 样式文件

引入样式文件

2.2步骤二：引用 Mditor 脚本文件

引入脚本文件

2.3步骤三：添加 textarea 元素

html中创建元素

2.4步骤四：创建 Mditor 实例

实例化

3.Meditor编辑器的局限性

只适合简单的文本排版，不支持复杂的表情输入、图片排版、格式刷等等功能， 如果需要使用复杂功能，最好还是使用UEditor、wangEditor等富文本编辑器

4.MARKDOWN语法的简单介绍

  Markdown语法最大的优点是「易读易写」。 可读性，无论如何，都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布， 并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法的目标是：成为一种适用于网络的书写语言。

  通俗点的说法即是Markdown语法通过使用一些简单的符号来将文本的排版表现出来，实现了对文本格式存储数据量的简化，它和html有很好的兼容性可以相互转化，比如markdown中使用#符号来表示html中的

标签，用一对*围在内容两边来表示。

5.编码实战

5.1引入富文本编辑器

通过cdn引入样式文件和脚本文件

在html中创建textarea元素

在脚本中将mditor实例化

效果图

5.2使用markdown-html在线装换器简单尝试下markdown语法

markdown语法源码

转换为html的效果

markdown语法源码

转换为html格式的效果

6.扩展思考

不同的富文本编辑器是通过什么方式把文本的格式保存下来的？

百度的富文本编辑器即是在加格式的文本中直接标签括起来，然后在标签中通过style直接给文本添加样式

7.参考文献

参考一：meditor的github主页

参考二：知乎--markdown是什么

8.更多讨论

大家还用过哪些好用的编辑器

ppt链接：ppt：https://ptteng.github.io/PPT/PPT/js-10-rte.html#/

视频链接：https://v.qq.com/x/page/z0516369gkk.html

【武汉-第146期（如何使用富文本编辑器）】_腾讯视频

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！

www.jnshu.com/login/1/95798135