大家好,我是IT修真院武汉分院第六期的学员景鑫,一枚正直纯洁善良的WEB前端程序员。
今天给大家分享一下,修真院官网JS任务10,如何使用富文本编辑器?
1.背景介绍
1.1什么是富文本编辑器
在做Web应用时,经常会进行富文本编辑,常用的富文本编辑器有很多, 比如CuteEditor、CKEditor、NicEditor、KindEditor、UEditor等等。 好的富文本编辑器可以让我们用户有更好的体验效果,带来更多的用户好评。
1.2Meditor
今天给大家介绍一款轻量级的文本编辑器,实际上是markdown编辑器,即把文本的格式用markdown语法表示出来,进行网络传输。这个编辑器的有点是引用非常简单,轻量级,转化为的markdown格式可以把文本格式占用的存储空间降低很多,非常易于网络传输,后面会简单介绍 一下markdown语法
2.知识剖析
2.1步骤一:引入 Mditor 样式文件
![](http://img.e-com-net.com/image/info10/b631c81301cf4e95895cff0a443a2044.jpg)
2.2步骤二:引用 Mditor 脚本文件
![](http://img.e-com-net.com/image/info10/e607e11b080b45e1bcffb2c0e17976ca.jpg)
2.3步骤三:添加 textarea 元素
![](http://img.e-com-net.com/image/info10/b3187ac7efed4a1d895347ee17521409.jpg)
2.4步骤四:创建 Mditor 实例
![](http://img.e-com-net.com/image/info10/5e8f7870a292483b856cc4ec013f7543.jpg)
3.Meditor编辑器的局限性
只适合简单的文本排版,不支持复杂的表情输入、图片排版、格式刷等等功能, 如果需要使用复杂功能,最好还是使用UEditor、wangEditor等富文本编辑器
4.MARKDOWN语法的简单介绍
Markdown语法最大的优点是「易读易写」。 可读性,无论如何,都是最重要的。一份使用 Markdown格式撰写的文件应该可以直接以纯文本发布, 并且看起来不会像是由许多标签或是格式指令所构成。Markdown语法的目标是:成为一种适用于网络的书写语言。
通俗点的说法即是Markdown语法通过使用一些简单的符号来将文本的排版表现出来,实现了对文本格式存储数据量的简化,它和html有很好的兼容性可以相互转化,比如markdown中使用#符号来表示html中的
标签,用一对*围在内容两边来表示5.编码实战
5.1引入富文本编辑器
![](http://img.e-com-net.com/image/info10/f2f2b5d74400434fb9fc6131e55dc7e4.jpg)
![](http://img.e-com-net.com/image/info10/85121d41471b4c338b76aa4e9ae1c7ed.jpg)
![](http://img.e-com-net.com/image/info10/ed8fe318c6ae49108756c0f2f53c249a.jpg)
![](http://img.e-com-net.com/image/info10/6323cfd7c99b47778e50c10839d09b79.jpg)
5.2使用markdown-html在线装换器简单尝试下markdown语法
![](http://img.e-com-net.com/image/info10/2c01c6f3d6664c04a6031d562217879b.png)
![](http://img.e-com-net.com/image/info10/eac1cde0c27b472998574a411b974043.png)
![](http://img.e-com-net.com/image/info10/20ce09ee2f3a49eaaea90695ec4b0216.png)
![](http://img.e-com-net.com/image/info10/255f9827f61243f896106272eb89c17c.png)
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
技能树.IT修真院
“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。
这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧 !
www.jnshu.com/login/1/95798135