这是我参与8月更文挑战的第21天，活动详情查看：8月更文挑战
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
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"
></script>
<script type="text/javascript">
const E = window.wangEditor
const editor = new E("#div1")
// 或者 const editor = new E(document.getElementById('div1'))
editor.create()
</script>
正常使用
先配置新建一个
然后在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('<p><br></p>')
获取编辑器的内容
-
获取编辑器区域完整html代码
this.editor.txt.html();
-
获取编辑器纯文本内容
this.editor.txt.text()
-
获取格式化后的纯文本
this.editor.txt.formatText();
-
编辑器追加新内容
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 一般用于限制纯文本，用于 <input> <textarea> 。 而富文本编辑器不只能输入纯文本，还有其他很多复杂的格式，例如图片、代码块、表格。 这些非文本内容，在 editor.txt.html() 返回结果中要占据大量的空间。
如果你非得需要一个富文本的 max-length ，那目前只能是通过 onchange 随时检查 editor.txt.text() ，然后判断长度，再对富文本做禁用处理。 不过，这其中可能会发生一些预期之外的问题，到时只能随机应变。
