2.知识剖析

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()

3.常见问题

wangEditor都有哪些用法?

4.解决方案

wangEditor的功能

1、菜单和编辑区域分离

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

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

2、单页面多个编辑器

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

3、内容

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

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

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

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

4、上传图片

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

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

base64格式保存图片

上传图片到服务器

5、参数配置

自定义菜单

debug 模式

配置 onchange 函数

自定义配置

5.编码实战

6.扩展思考

wangEditor有什么缺点?

7.参考文献

8 更多讨论

各种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这点做的很好。需要一定的功底方能更好的使用，好在作者代码注释写的很全。

鸣谢

感谢大家观看