富文本编辑器 wangeditor 的使用

富文本编辑器 wangeditor 的使用

为什么选择使用 wangeditor

a. 轻量、简洁、界面美观、文档齐全、易用、开源免费、开源团队维护、有专业Q群答疑、持续更新、无需使用其他库。插件功能基本符合我们目前的业务需求

b. 相比较于TinyMCE一类的编辑器，中文文档入门简单，节约了学习的时间成本

c. 相比较于KindEditor一类的编辑器，界面更加美观，文档更易阅读。KindEditor默认的快捷键功能按钮更多；但是图片上传分为了单图片和多图片上传两类，不如wangeditor便捷；使用了jquery的语法

d. 相比较于ueditor一类的编辑器，开源团队维护，仍在持续更新，有相对应的Q群可解疑

e. wangeditor可以自定义扩展菜单；直接复制文本内容，可选择保留或删除样式、图片；文本格式进行操纵

2.安装

npm i wangeditor --save

3.引入使用

import E from 'wangeditor'const editor = new E("节点标签") //绑定节点editor.create() //富文本被创建后，文本是默认居中显示的。而 wangeditor 也没有文本对齐相关的配置项，所以要改变初始文本的显示位置只有通过 css 样式改变

常用设置（以下所有没有特别标注的都是需要放置在 create 方法之前的）

a. 设置编辑区域高度

editor.config.height = 400 //默认高度为 300，设置高度时不需要添加单位

b. 分离菜单栏和编辑区域

const editor = new E("菜单栏节点标签", "编辑区域节点标签") //在绑定节点时需要绑定两个节点标签，同时也需要给两个绑定的标签重新添加样式，不然就会没有外框显示

c. 同时存在多个编辑器(每个编辑器设置自己的节点标签并创建，互不干扰)

const editor1 = new E("第一个节点标签")editor1.create()const editor2 = new E("第二个节点标签")editor2.create()

d.配置 z-index（默认为1000）

editor.config.zIndex = 100

e. 修改默认提示文字

editor.config.placeholder = '自定义 placeholder 文字' //当设置为空时，可以清除提示文字

f.自动聚焦（编辑器初始化时，是默认聚焦到编辑区域的）

editor.config.focus = false //可以取消自动聚焦

g.自定义 alert（默认使用浏览器自带alert）

import { message } from 'ant-design-vue' //如要用到 ant 组件，则还需在 main.js 里引入样式文件editor.config.customAlert = function(s, t){switch(t) {case 'success':message.success(s)breakdefault:message.error(s)break}}editor.config.customAlert('成功了', 'success')editor.config.customAlert('什么都没有')

h. 内容处理

ⅰ. 设置内容

1. 在绑定的标签节点内添加 html 内容

2. 也可以给绑定的标签节点添加属性 v-html 设置编辑器内容

3. 通过 editor.txt.html(‘html 内容’) 来设置编辑器内容（需要设置在 create 之后或事件中才能生效）

4. 优先级：3 > 2 > 1

5. 使用 editor.txt.append(‘追加的 html 内容’) 来向编辑器中追加内容，如果编辑器中本来存在内容的话，会在其后显示（需要设置在 create 之后或事件中才能生效）

ⅱ. 获取 html（任何地方均可使用）

editor.txt.html()

ⅱi. 获取文本内容（任何地方均可使用）

editor.txt.text()

ⅳ. JSON 内容格式

1. 通过 editor.txt.getJSON() 来获取 JSON 格式的编辑器内容（该方法需要放置在 create 之后，或者放置在事件中）

2. 通过 editor.txt.setJSON([]) 来设置 JSON 格式的编辑器内容（该方法需要放置在 create 之后，或者放置在事件中，同时 JSON 格式内容有严格要求）

setJSON([{tag: '标签',children: ['子内容'],attrs: [{name: '标签对应 name 属性',value: 'name 属性对应值'}]}])

清空编辑器内容（需要设置在 create 之后或事件中才能生效）

editor.txt.clear()

配置历史记录

patibleMode = function() {return true} //配置历史记录模式，true 为兼容模式（IE和旧版Edge），false 为标准模式（主流浏览器）editor.config.onchangeTimeout = 500 //兼容模式时，自定义记录的频率editor.config.historyMaxSize = 10 //自定义历史记录的步数，在该范围内可以使用 ctrl+z/ctrl+shift+z 或菜单栏中的撤销/恢复按钮 来撤销/恢复操作

i. 配置项

ⅰ. 自定义菜单

editor.config.menus = ['bold', 'head', 'link'] //自定义菜单栏显示的菜单及顺序editor.config.excludeMenus = ['emoticon', 'video'] //自定义剔除不需要的菜单功能所有菜单：['head', // 标题'bold', // 粗体'fontSize', //字号'fontName', //字体'italic', // 斜体'underline', //下划线'strikeThrough', //删除线'indent', //缩进'lineHeight', //行高'foreColor', //文字颜色'backColor', //文字背景颜色'link', //链接，插入一个链接地址，如果填写了描述，则高亮显示描述。若没有，则高亮显示链接'list', // 序列（有序列表、无序列表）'todo', //待办事项'justify', // 对齐方式'quote', //引用'emoticon', //表情'image', //插入图片'video', //插入视频'table', //表格'code', //代码'splitLine', //分割线'undo', //撤销'redo' //恢复]

ⅱ. 配置颜色（自定义菜单栏中文字颜色、背景颜色的可用颜色）

editor.config.colors = ['#000', '#eee']

ⅲ. 配置可用字体形式

editor.config.fontNames = [{name: '显示的字体文案名',value: '规范字体名'},'规范字体名']

ⅳ. 配置可用字号

editor.config.fontSizes = {'x-small': { name: '10px', value: '1' } //此外还有 'small', 'normal', 'large', 'x-large', 'xx-large', 'xxx-large'}

ⅴ. 配置可用行高

editor.config.lineHeights = ['1', '1.15', '1.2']

ⅵ. 配置可用表情图标

editor.config.emotions = [{title: 'tab 标题',type: 'image', //展现形式，只有 emoji 或者 imagecontent: [{alt: '表情说明', src: '地址'}] //content 可以用其他表示方法，但是需要是数组},{title: 'tab 标题',type: 'emoji',content: '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😓 😪 😴 🙄 🤔 😬 🤐'.split(/\s/),}]

ⅶ. 配置全屏功能

editor.config.showFullScreen = false //取消展示全屏功能editor.fullScreen() //全屏editor.unFullScreen() //取消全屏

ⅷ. 配置菜单栏的提示显示

editor.config.showMenuTooltips = false //隐藏菜单栏提示editor.config.menuTooltipPosition = '方向' //设置菜单栏提示方向 up（上标）、down（下标）

粘贴过滤(不适用于 IE11)

a. 关闭粘贴样式的过滤（编辑器会默认过滤掉粘贴文本的样式）

editor.config.pasteFilterStyle = false

b. 忽略粘贴内容中的图片

editor.config.pasteIgnoreImg = true

c. 自定义处理粘贴的文本内容（调用此方法，没有return的话粘贴的内容会被阻止）

editor.config.pasteTextHandle = function(pasteStr) {} //pasteStr 表示粘贴的文本内容

常用 API

editor.id //编辑器唯一的 ideditor.config //编辑器的所有配置（默认的配置和设置的配置）editor.$textElem.elems[0] //编辑区域 DOM 节点editor.textElemId //编辑区域元素 ideditor.$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、texteditor.scrollToHead(headId) //滚动到某个标题，headId 为上个方法中获取到的 id

常用方法

a. onchange

editor.config.onchange = function(newHtml) {} //newHtml 是编辑框内容发生改变后得到的最新的 htmleditor.config.onchangeTimeout = 500 //配置触发 onchange 的时间频率，默认为 200ms

b. onSelectionChange：用户选区操作（鼠标选中文字，ctrl+a全选等）会自动触发

editor.config.onSelectionChange = function(newSelection) {} //newSelection 是一个对象，包含 text（当前选择文本）、html（当前选中的 html）、selection（原生 selection 对象）

c. onfocus 和 onblur：聚焦和失焦时自动触发，获得的参数都是最新的 html 内容

editor.config.onfocus = function(newHtml) {}editor.config.onblur = function(newHtml) {}

d. linkImgCallback：插入网络图片的回调事件

editor.config.linkImgCallback = function(src, alt, href) {} //src：图片的路径地址，alt：图片文字说明，href：点击图片跳转的链接地址；此三个参数都是上传网络图片时需要的参数，只有 src 为必传editor.config.linkImgCheck = function(src, alt, href) {} //该方法是对插入网络图片的校验，参数同上。返回 true 代表通过；返回字符串会阻止并 alert 错误信息；返回 undefined 没有任何返回

e. onlineVideoCallback：自定义检查插入网络视频后的回调

editor.config.onlineVideoCallback = function(video) {} //video 返回一个含有视频地址的完整 iframe 标签（即上传视频时的参数）editor.config.onlineVideoCheck = function(video) {} //该方法是对插入网络视频的校验，参数同上。返回 true 代表通过；返回字符串会阻止并 alert 错误信息；返回 undefined 没有任何返回

f. linkCheck：自定义检查插入的链接

editor.config.linkCheck = function(text, link) {} //text：链接说明文字；link：链接地址

图片上传

a. 配置服务端接口（服务端接口需返回 application/json 格式）

editor.config.uploadImgServer = '/upload'

b. 限制图片大小和类型

editor.config.uploadImgMaxSize = 2 * 1024 * 1024 //默认限制为 5Meditor.config.uploadImgAccept = ['jpg', 'jpeg'] //默认限制为 ['jpg', 'jpeg', 'png', 'gif', 'bmp']，设置为空数组时表示不限制

c. 限制一次最多上传几张图片

editor.config.uploadImgMaxLength = 5

d. 自定义上传参数（参数会被添加到 formData 中一起上传到服务端）

editor.config.uploadImgParams = {token: 'xxx',x: 100}editor.config.uploadImgParamsWithUrl = true //当需要将参数拼接到 url 中时

e. 自定义使用 formData.append(name, file） 添加图片文件时，第一个参数名

editor.config.uploadFileName = 'file'

f. 自定义上传图片时添加 http 请求的 header

editor.config.uploadImgHeaders = {Accept: 'text/x-json',a: 100}

g. 跨域传递 cookie

editor.config.withCredentials = true

h. 自定义上传接口等待的最大时间，默认为 10 秒钟

editor.config.uploadImgTimeout = 5 * 1000

i. 默认上传图片的处理函数

editor.config.uploadImgHooks = {before: function(xhr) {} //上传图片之前，可以通过返回 return { prevent: true, message: '错误提示' } 阻止图片上传，一旦返回此对象，不管循环多深，都会最后执行success: function(xhr) {} //图片上传并返回了结果，图片插入已成功fail: function(xhr, editor, resData) {} //图片上传并返回了结果，但图片插入时出错了error: function(xhr, editor, resData) {} //图片上传出错，一般为 http 请求的错误timeout: function(xhr) {} //图片上传超时customInsert: function(insertImgFn, result) {} //图片上传并返回了结果，想要自己把图片插入到编辑器中，通过 insertImgFn(result.data[0]) 插入} //当设置了服务端接口，且接口不支持同时上传多张图片时，此方法不再适用，需要自己重新实现上传图片功能

j. 自己实现上传图片

editor.config.customUploadImg = function(resultFiles, insertImgFn) {} //resultFiles 表示上传的所有图片的文件说明，可以循环并使用 insertImgFn 实现图片的插入

k. 使用 base64 保存图片（不能与 uploadImgServer 功能同时使用）

editor.config.uploadImgShowBase64 = true

l. 设置网络图片的 alt 和跳转链接显示

editor.config.showLinkImgAlt = falseeditor.config.showLinkImgHref = false

m. 隐藏插入网络图片的功能，只保留本地上传图片

editor.config.showLinkImg = false

视频上传与图片上传功能相同（只需要把其中的 Img 改为 Video 即可）特殊的情况

a. 火狐浏览器下，通过 editor.txt.html() 获取到的编辑器的 html 的结束标签前面会有一个换行标签

b. 浏览器中，编辑器中的空格内容会被编译成 ，需要对空格做特殊处理：replace(//gi, ‘’)

c. 对 editor.txt.html() 获取到的 html 内容使用 trim() 无效，因为返回的是一个标签元素