wangEditor v4的简单使用

当前文档是 wangEditor v4 版本的。

wangEditor v5 已经正式发布，可参考文档。

v5 发布之后，v4 将不再开发新功能。

介绍

English documentation

wangEditor4 —— 轻量级 web 富文本编辑器，配置方便，使用简单。

• 官网：www.wangeditor.com
• 文档：www.wangeditor.com/v4
• 源码：github.com/wangeditor-team/wangEditor （欢迎 star）

1：npm 安装 wangeditor

wangeditor v4 npm i wangeditor --save

基本使用：

<div id="div1"><p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<script type="text/javascript">const E = window.wangEditorconst editor = new E('#div1')editor.create()
</script>

2：构建引入 wangeditor

import E from 'wangeditor'

3：创建html

<div ref="editorRef"></div>

根据 ref 设置 编辑器元素高度，实例化 wangeditor

const editorRef = ref()
editor = new E(editorRef.value)

4：配置菜单

默认情况下，显示所有菜单

 // 配置菜单栏，删减菜单，调整顺序
editor.config.menus = ['bold','head','link','italic','underline'
]
​

5：图片相关处理

5.1 上传图片限制

editor.config.uploadImgMaxLength = 3

5.2 上传图片大小限制

editor.config.uploadImgMaxSize: 10 * 1024 * 1024, // 10M

5.3 请求头的设置

uploadImgServer: props.action, // 配置 server 接口地址
uploadImgHeaders: {Authorization: `Bearer ${getPiniaToken()}`,'X-Requested-With': 'XMLHttpRequest',
},

5.4 上传请求接口

editor.config.customUploadImg = function (resultFiles, insertImgFn) {// resultFiles 是 input 中选中的文件列表// insertImgFn 是获取图片 url 后，插入到编辑器的方法
​// 上传图片，返回结果，将图片插入到编辑器中insertImgFn(imgUrl)
}

5.5 上传前的钩子函数

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: [...] } 这种格式，可使用 customInsertcustomInsert: function(insertImgFn, result) {// result 即服务端返回的接口console.log('customInsert', result)
​// insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可insertImgFn(result.data[0])}
}

如果使用了 customUploadImg 自定义上传事件，那么 wangeditor 其他的图片上传api将会失效，例如： uploadImgServer 和 uploadImgHeaders，uploadImgHooks

以上都是修改在 editor.config,可以直接在 定义一个对象在editor.config中，看自己的需求：

6：设置是否源码模式

wangeditor 4 不支持源码模式，但可以自定义新增菜单

在 wangeditor 中创建 dom,按照官方文档写法如下：

  constructor(editor: E) {// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述const $elem = $(`<div class="w-e-menu" data-title="源码"><i style="font-style: normal">源码</i></div>`)super($elem, editor)}

给新增的dom菜单添加事件

// 菜单点击事件
clickHandler() {this.switchMode()this.tryChangeActive()
}

修改源码模式

enum Mode {// 源码模式Source = 'source',// 实时预览模式Live = 'live',
}

上面使用了枚举定义，也可以不需要做，看自己的使用方式

在这里判断模式状态

 this.mode = this.isSouceMode() ? Mode.Live : Mode.Source

重新设置编辑器内容

let html = this.editor.txt.html() || ''

切换为源码模式，替换内容

使用字符串replace()函数查找字符进行转换，输出为源码Html

html = html.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/ /g, '&nbsp;')

源码转换为文本内容

 html = this.editor.txt.text().replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&nbsp;/gi, ' ')

菜单激活事件，每次切换菜单的时候要调用下wangeditor 方法，否则编辑器不知道你当前菜单(扩展)有哪些

tryChangeActive() {if (this.isSouceMode()) {this.active()} else {this.unActive()}}

其他，扩展菜单可以参考文档案例：https://codepen.io/xiaokyo-the-bold/pen/ZEpWBeo

7：案例

扩展菜单class

export default class sourceMenu extends BtnMenu {mode = Mode.Live
​constructor(editor: E) {const $elem = $(`<div class="w-e-menu" data-title="源码"><i style="font-style: normal">源码</i></div>`)super($elem, editor)}
​// 菜单点击事件clickHandler() {this.switchMode()this.tryChangeActive()}tryChangeActive() {if (this.isSouceMode()) {this.active()} else {this.unActive()}}
​isSouceMode() {return this.mode === Mode.Source}
​switchMode() {this.mode = this.isSouceMode() ? Mode.Live : Mode.Sourcelet html = this.editor.txt.html() || ''if (this.isSouceMode()) {html = html.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/ /g, '&nbsp;')} else :html = this.editor.txt.text().replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&nbsp;/gi, ' ')}this.editor.txt.html(html)}
}

在页面加载时，初始化wangeditor配置

  editor.create()editor.txt.html(props.modelValue) // 初始化重新设置编辑器内容

部分代码

onMounted(() => {editor = new E(editorRef.value)// 扩展自定义【源码】菜单const sourceMenuKey = 'source'editor.menus.extend(sourceMenuKey, sourceMenu)// 配置Object.assign(editor.config, {zIndex: 1,focus: false,height: props.height,menus: [sourceMenuKey, // 源码菜单'head','bold','fontSize','fontName','italic','underline','strikeThrough','indent','lineHeight','foreColor','backColor','link','list','todo','justify','quote','emoticon','image',// 'video', // 移除视频菜单'table','code','splitLine','undo','redo',],uploadFileName: 'file',uploadImgParams: {path: props.path,},uploadImgServer: '', // 配置 server 接口地址uploadImgHeaders: {Authorization: 'token','X-Requested-With': 'XMLHttpRequest',},// 限制上传的最大图片数量uploadImgMaxLength: 2,// 单个文件的最大体积限制，默认为 10MuploadImgMaxSize: 5 * 1024 * 1024, // 5McustomUploadImg: (files: Blob[], insertImgFn: (path: string) => void) => {try {const imgData = new FormData()for (let i in files) {imgData.append(`file`, files[i])}// 请求接口,并通过   insertImgFn()函数 插入到编辑器中// imgUrl 是从接口返回的图片地址insertImgFn(imgUrl)} catch (error) {message.error('图片上传失败,请重新上传')}},
​uploadImgHooks: {customInsert: function (insertImgFn: (path: string) => void, res: Recordable) {// res即远程请求的response// insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可insertImgFn(res.data.path as string)},},onchange() {let sourceMenu = editor?.menus.menuList.find((item) => item.key === sourceMenuKey)emit('update:isActive', sourceMenu?.isActive)emit('update:modelValue', editor!.txt.html())},onblur() {lock = true},})editor.create()editor.txt.html(‘回显时的内容’) // 初始化重新设置编辑器内容watchEffect(() => {props.disabled ? editor?.disable() : editor?.enable()})
})
onBeforeUnmount(() => {editor!.destroy()editor = null
})