當前文檔是 wangEditor v4 版本的。

wangEditor v5 已經(jīng)正式發(fā)布，可參考文檔。

v5 發(fā)布之后，v4 將不再開發(fā)新功能。

介紹

English documentation

wangEditor4?—— 輕量級 web 富文本編輯器，配置方便，使用簡單。

• 官網(wǎng)：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：創(chuàng)建html

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

根據(jù) ref 設置 編輯器元素高度，實例化 wangeditor

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

4：配置菜單

默認情況下，顯示所有菜單

 // 配置菜單欄，刪減菜單，調(diào)整順序
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 上傳前的鉤子函數(shù)

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 ，執(zhí)行函數(shù)即可insertImgFn(result.data[0])}
}

如果使用了 customUploadImg 自定義上傳事件，那么 wangeditor 其他的圖片上傳api將會失效，例如： uploadImgServer 和 uploadImgHeaders，uploadImgHooks

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

6：設置是否源碼模式

wangeditor 4 不支持源碼模式，但可以自定義新增菜單

在 wangeditor 中創(chuàng)建 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',
}

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

在這里判斷模式狀態(tài)

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

重新設置編輯器內(nèi)容

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

切換為源碼模式，替換內(nèi)容

使用字符串replace()函數(shù)查找字符進行轉(zhuǎn)換，輸出為源碼Html

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

源碼轉(zhuǎn)換為文本內(nèi)容

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

菜單激活事件，每次切換菜單的時候要調(diào)用下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) // 初始化重新設置編輯器內(nèi)容

部分代碼

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',},// 限制上傳的最大圖片數(shù)量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()函數(shù) 插入到編輯器中// imgUrl 是從接口返回的圖片地址insertImgFn(imgUrl)} catch (error) {message.error('圖片上傳失敗,請重新上傳')}},
?uploadImgHooks: {customInsert: function (insertImgFn: (path: string) => void, res: Recordable) {// res即遠程請求的response// insertImgFn 可把圖片插入到編輯器，傳入圖片 src ，執(zhí)行函數(shù)即可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(‘回顯時的內(nèi)容’) // 初始化重新設置編輯器內(nèi)容watchEffect(() => {props.disabled ? editor?.disable() : editor?.enable()})
})
onBeforeUnmount(() => {editor!.destroy()editor = null
})