如何使用富文本编辑器-wangEditor?

大家好,我是IT修真院郑州分院第七期的学员,一枚正直纯洁善良的WEB程序员 今天给大家分享一下,题目如何使用富文本编辑器-wangEditor?


一、背景介绍

富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。

富文本编辑器不同于文本编辑器,程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里(当然付费的功能会更强大些),方便用户编辑文章或信息。比较好的文本编辑器有kindeditor,fckeditor等。


二、知识剖析

wangEditor富文本编辑器

基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费

与国产编辑器 百度ueditor 和 kindeditor 相比,它轻量、易用、UI设计精致漂亮。与国外编辑器 bootstrap-wysiwyg 和 simditor 相比,它文档易读、交流方便,更接地气。 它还会根据使用者的反馈不断完善,未来将支持移动版。

使用方法

因为wangEditor是轻量的,所以不需要引入任何的CSS,只需要引入一个脚本文件://unpkg.com/wangeditor/release/wangEditor.min.js

在JS中定义:

var E = window.wangEditor

var editor = new E('#editor')

editor.create()


三、常见问题

wangEditor都有哪些用法?


四、解决方案

wangEditor的功能

1、菜单和编辑区域分离

如果你想要像 知乎专栏、简书、石墨、网易云笔记 这些编辑页面一样,将编辑区域和菜单分离,也可以实现。

这样,菜单和编辑器区域就是使用者可自己控制的元素,可自定义样式。

2、单页面多个编辑器

wangEditor 支持一个页面创建多个编辑器

3、内容

创建完成编辑器后,可以在编辑器中直接添加内容,也可以自定义一些内容,例如创建编辑器之后,可使用editor.txt.append('内容')继续追加内容。

editor.txt.clear()用来清除编辑器中的内容

可以html和text的方式读取编辑器的内容

可以通过editor.txt.getJSON获取 JSON 格式的编辑器的内容

4、上传图片

默认情况下,编辑器不会显示“上传图片”的tab,需要手动配置上传图片的信息。

同样的,也可以隐藏“网络图片”tab

base64格式保存图片

上传图片到服务器

5、参数配置

自定义菜单

debug 模式

配置 onchange 函数

自定义配置


五、编码实战

腾讯视频


六、拓展思考

wangEditor有什么缺点?


七、参考文献

wangEditor3使用手册

各种Editor对比


八、更多讨论

各种Editor对比

KingEditor:

优点:外观简洁,功能很清楚,plugin目录很清楚,代码很规范。用起来还是很不错的。

缺点:插入代码有问题,不能很好的可见即所得,就是感觉缺少点与时俱进的感觉。

CKEditor:

优点:外观简洁。

缺点:繁重、JS引用很多,不是很了解的人,根本分不清楚那些是对自己有用,哪些是没用,没有想KingEditor那样每个plugin都一个目录,导致一些初学者引用很多JS,CSS,加载很慢。API不明确,各种Iframe,跨域。反正感觉各种不好用。

百度ueditor:

优点:其实还不错,毕竟是大公司做出来的,外观、功能、多语言支持都很好,尤其是PHP。

缺点:繁重、耦合度很高,针对每个语言都做不同的版本。

bootstrap-wysiwyg、simditor:

优点:bootstrap-wysiwyg,simditor都还不错,风格、一直有更新。

缺点:文档和资料方面CN版本较少,目前使用者较少。

wangEditor:

优点:作者一直有更新,并且有QQ群: 164999061,github,作者能及时的回答问题。有一点非常赞的一点,代码注释非常好。并且有区分开发和上线提示,并且判断Console日志输出。

缺点:缺少各种功能Demo,KingEditor这点做的很好。需要一定的功底方能更好的使用,好在作者代码注释写的很全。


Q1:问题:菜单栏按钮不能换行怎么办?

A1:回答:这个问题wangEditor的作者也想过,目前只能通过精简菜单栏来实现,暂时不能换行.

Q2:问题:

A2:回答:

Q3:问题:

A3:回答:



感谢大家观看!

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

获得更多IT技能,请移步官网 点击链接直达:http://www.jnshu.com/login/1/17884272


PS: 以上内容,大部分为摘抄别人的,原文在参考文献处.

猜你喜欢

转载自blog.csdn.net/f056917/article/details/80632793