如何使用富文本编辑器-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 函数

自定义配置

七、参考文献

wangEditor3使用手册

各种Editor对比

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

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

Q2:问题:编辑器能否有上传附件的功能？

A2:回答:

作者的建议是不要把附件做到内容中。

原因很简单，如果将附件上传之后再插入到富文本内容中，其实就是一个链接的形式。如下图：

而用户在用编辑器编辑文本时，操作是非常随意多样的，他把这个链接删了，你服务器要想实时删除上传的附件文件，是难监控到的。

还有，用户如果要上传很多个附件，也是很难管理的，还是因为富文本的内容变化多样，用户可以随便在什么地方插入附件，而且形式和链接一样。

反过来，我们想一下平时用附件和编辑器最多的产品是什么——是邮箱。邮箱如何处理附件的，大家应该很清楚。它把文本内容和附件分开，这样附件就可以很轻松、明了的进行管理，绝对不会和编辑内容的链接产生混淆。

Q3:问题: 关于获取富文本编辑器内容的时候，报错显示不在文档流之中怎么解决？

A3:回答: 由于JS脚本加载的优先级问题，有时候需要给相关逻辑加上延时函数，避免在操作节点的时候，还未生成。