富文本编辑器

最近 用到了富文本编辑器：wangeditor；

菜单栏 ：

            'head',  // 标题

            'bold',  // 粗体

            'fontSize',  //字号

            'fontName',  //字体

            'italic',  // 斜体

            'underline',  //下划线

            'strikeThrough',  //删除线

            'indent',  //缩进

            'lineHeight',  //行高

            'foreColor',  //文字颜色

            'backColor',  //文字背景颜色

            'link',  //链接，插入一个链接地址，如果填写了描述，则高亮显示描述。若没有，则高亮显示链接

            'list',  // 序列（有序列表、无序列表）

            'todo',  //待办事项

            'justify',  // 对齐方式

            'quote',  //引用

            'emoticon',  //表情

            'image',  //插入图片

            'video',  //插入视频

            'table',  //表格

            'code',  //代码

            'splitLine',  //分割线

            'undo',  //撤销

            'redo' //恢复

如果要隐藏菜单栏中的某个功能；

mounted() {
            const editor = new WangEditor(this.$refs.editorContainer);
            editor.config.placeholder = '请输入文本...'  //当设置为空时，可以清除提示文字
            editor.config.excludeMenus = ['emoticon', 'video', "link", "code"]  //隐藏功能表情、视频
            editor.create();
            
},

---

---

常用到的API有如下：

editor.id  //编辑器唯一的 id
editor.config  //编辑器的所有配置（默认的配置和设置的配置）
editor.$textElem.elems[0]  //编辑区域 DOM 节点
editor.textElemId  //编辑区域元素 id
editor.$toolbarElem.elems[0]  //菜单栏 DOM 节点
editor.toolbarElemId  //菜单栏元素 id
<!-- 以下5个API需要在onSelectionChange事件中触发 -->
editor.selection.getSelectionText()  //选中的文字
editor.selection.getSelectionContainerElem().elems[0]  //选区所在的 DOM 节点
editor.selection.getSelectionStartElem().elems[0]  //选区开始的 DOM 节点
editor.selection.getSelectionEndElem().elems[0]  //选区结束的 DOM 节点

editor.selection.collapseRange(toStart)  //折叠选区，toStart默认为false，表示结束位置（即光标定位在原选区的最末尾处），true表示开始位置（即光标定位在原选区的最开始处）
editor.selection.isSelectionEmpty()  //判断选区是否为“空”，没有选中任何文字(即没有进行选区操作，通常与onchange事件搭配)
editor.cmd.do('insertHTML', value)  //在光标位置插入文字（需放在create之后或事件之中）
editor.disable()  //禁用编辑器，只能放置在 create 之后或事件中才能生效
editor.enable()  //解禁编辑器
editor.destroy()  //销毁编辑器
editor.config.onCatalogChange = function(headList) {}  //此方法可以获取编辑器内的所有标题，headList 返回 list 格式的对象，对象包含 id、tag、text
editor.scrollToHead(headId)  //滚动到某个标题，headId 为上个方法中获取到的 id