**这是我参与8月更文挑战的第21天，活动详情查看：[8月更文挑战](https://juejin.cn/post/6987962113788493831 "https://juejin.cn/post/6987962113788493831")** **wangEditor** —— 轻量级 web 富文本编辑器，配置方便，使用简单。 ### 浏览器兼容性兼容常见的 PC 浏览器：Chrome，Firefox，Safari，Edge，QQ 浏览器，IE11。不支持移动端。 ### 基本使用 #### NPM ``` npm i wangeditor --save ``` 安装后几行代码即可创建一个编辑器： ``` import E from "wangeditor" const editor = new E("#div1") editor.create() ``` #### CDN ``` ``` #### 正常使用先配置新建一个 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9935792ba8ba4ace8af243582cd1f46b~tplv-k3u1fbpfcp-watermark.image) 然后在`mounted（）`方法里面写创建 ``` mounted(){ const random = Math.random(); const editor = new wangEditor(`#editor`) const url = this.url editor.config.onchange = (newHtml) => { this.editorData = newHtml } editor.config.showLinkImg = false //隐藏网络图片 editor.config.uploadImgServer = `${this.$baseUrl}/image/upload` //图片上传的地址 editor.config.uploadFileName = 'file' //文件传给后端的名称。类似formData.append("file", param.file);中的file editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp']//上传图片的类型 editor.customconfig.uploadimgheaders = {// 上传的请求头部 'accept': '*/*', 'authorization':'bearer ' } editor.config.uploadImgParams = { //上传请求的参数 user_id: localStorage.user_id, s_id: localStorage.s_id, random:this.random, img_kind:'open' } editor.config.uploadImgHooks = { //上传图片的可使用回调函数 // 上传图片之前 before: function(xhr) { console.log(xhr) // 可阻止图片上传 // return { // prevent: true, // msg: '需要提示给用户的错误信息' // } }, // 图片上传并返回了结果，图片插入已成功 success: function(xhr) { console.log('success', xhr) }, // 图片上传并返回了结果，但图片插入时出错了 fail: function(xhr, editor, resData) { console.log('fail', resData) }, // 上传图片出错，一般为 http 请求的错误 error: function(xhr, editor, resData) { console.log('error', xhr, resData) }, // 上传图片超时 timeout: function(xhr) { console.log('timeout') }, // 图片上传并返回了结果，想要自己把图片插入到编辑器中 // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert customInsert: function(insertImgFn, result) { // result 即服务端返回的接口 console.log('customInsert', result) // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可 insertImgFn(result.url) } } editor.create() this.editor = editor } ``` 文本编辑器的回显 ``` this.editor.txt.html(`${res.src_desc}`)//编辑器回显 ``` 清空内容 ``` this.editor.txt.html('

') ``` 获取编辑器的内容 1. 获取编辑器区域完整html代码 this.editor.txt.html(); 2. 获取编辑器纯文本内容 this.editor.txt.text() 3. 获取格式化后的纯文本 this.editor.txt.formatText(); 4. 编辑器追加新内容 this.editor.txt.append('

新追加的内容

'); 编辑器的启用与禁用 ``` // 禁用 editor.disable(); // 启用 editor.enable(); ``` 编辑器的`z-index`问题，有时候编辑器会因为权重的问题覆盖了其他的组件的使用将全屏时z-index修改为20000，要写在编辑器创建之前 ``` editor.config.zindex = 20000; editor.create(); ``` 或者也可以通过css来修改 ``` /* 富文本编辑器 */ .w-e-toolbar { z-index: 2 !important; } .w-e-text-container { z-index: 1 !important; } ``` ### editor 属性编辑器唯一的 id `editor.id` 编辑器的所有配置 `editor.config` 编辑区域 DOM 节点 `editor.$textElem.elems[0]` ，元素 id `editor.textElemId` 菜单栏 DOM 节点 `editor.$toolbarElem.elems[0]` ，元素 id `editor.toolbarElemId` ### 选区范围 API 选中的文字 `editor.selection.getSelectionText()` 选区所在的 DOM 节点 `editor.selection.getSelectionContainerElem().elems[0]` 选区开始的 DOM 节点 `editor.selection.getSelectionStartElem().elems[0]` 选区结束的 DOM 节点 `editor.selection.getSelectionEndElem().elems[0]` 折叠选区 `editor.selection.collapseRange()` 判断选区是否为“空”（即没有选中任何文字）`editor.selection.isSelectionEmpty()` ### max-length **wangEditor 暂时无法实现 `max-length` 功能。** 目前业界没有一个富文本 `max-length` 的统一做法，从产品到技术层面都没有。 `max-length` 一般用于限制纯文本，用于 `` `