当前文档是 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, '<').replace(/>/g, '>').replace(/ /g, ' ')
源码转换为文本内容
html = this.editor.txt.text().replace(/</gi, '<').replace(/>/gi, '>').replace(/ /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, '<').replace(/>/g, '>').replace(/ /g, ' ')} else :html = this.editor.txt.text().replace(/</gi, '<').replace(/>/gi, '>').replace(/ /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
})