一、什么是富文本编辑器？
相信很多小伙伴都用过富文本编辑器。富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。可以实现很多功能，如改变字体颜色，插入图片视频等，应用十分广泛。市场上主流的编辑器也有不少，如TinyMCE，CKEditor，wangEditor等。每一款都有独特的地方，只有使用过才体会深刻。今天，我们主要介绍wangEditor。因为最近项目中集成了wangEditor，所以作为新手，将使用体会记录如下。
二、wangEditor介绍
wangEditor是一款轻量级 web 富文本编辑器，配置方便，使用简单，开源免费。支持 IE10+ 浏览器。
三、下载
npm i wangeditor --save
或
yarn add wangeditor --save
四、使用
4-1： 引用到项目
1.如果是通过npm/yarn 下载wangeditor ；
import E from 'wangeditor'
const editor = new E('#div1')
// 或者 const editor = new E( document.getElementById('div1') )
editor.create()
2.js外链引用的方式也分两种（在线链接引用和本地资源引用）
<script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<!--此处的src也可以是本地资源链接 -->
<script type="text/javascript">
const E = window.wangEditor
const editor = new E("#div1")
// 或者 const editor = new E(document.getElementById('div1'))
editor.create()
</script>
注意：一个页面可创建多个编辑器
//创建多个编辑器
<script>
var E = window.wangEditor
//第一个编辑器
var editor1 = new E('#div1')
editor1.create()
//第二个编辑器
var editor2 = new E('#div2')
editor2.create()
</script>
4-2：分离菜单栏和编辑栏区域
<div id="div3">菜单区</div>
<div>--------------------------------</div>
<div id="div4">编辑区</div><script>
//先实例化wangEditor，再分别用两个DOM渲染菜单区和编辑区var E = window.wangEditorvar editor2 = new E('#div3','#div4')
editor2.create()
</script>
4-3：配置菜单区和编辑区内容
<script>var E = window.wangEditorvar editor1 = new E('#div1')//配置菜单栏// 如果菜单栏宽度不够，建议精简菜单项。editor1.customConfig.menus = ['head', // 标题'bold', // 粗体'fontSize', // 字号'fontName', // 字体'italic', // 斜体'underline', // 下划线'strikeThrough', // 删除线'foreColor', // 文字颜色'backColor', // 背景颜色'link', // 插入链接'list', // 列表'justify', // 对齐方式'quote', // 引用'emoticon', // 表情'image', // 插入图片'table', // 表格'video', // 插入视频'code', // 插入代码'undo', // 撤销'redo' // 重复]// 配置颜色editor1.customConfig.colors = ['#000000',...// 可自行添加]// 配置字体editor1.customConfig.fontNames = ['宋体','微软雅黑','Arial', ...// 可自行添加]editor1.create()</script>
最后，附上 wangEditor官方文档,更多内容等你探索！
