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

大家好，我是IT修真院武汉分院第六期的学员景鑫，一枚正直纯洁善良的WEB前端程序员。

今天给大家分享一下，修真院官网JS任务10，如何使用富文本编辑器？

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