wangEditor介绍（入门级）

一、什么是富文本编辑器？

相信很多小伙伴都用过富文本编辑器。富文本编辑器（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.wangEditor
        var 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官方文档,更多内容等你探索！