Vue3問題：如何使用WangEditor富文本？能自定義才是真的會用！
作者：程序員大澈
如果想要自定義，只需修改工具欄配置對象的ToolbarKeys屬性。toolbarKeys屬性值是一個(gè)數(shù)組，內(nèi)部填寫菜單的key，使用官方API接口Editor.getAllMenuKeys()可查詢?nèi)績?nèi)置菜單的key。
一、需求分析，問題描述
1、需求
使用富文本進(jìn)行內(nèi)容編輯，要求自定義工具欄菜單順序及其分組，并且要求自定義選擇圖片、自定義選擇視頻。
2、問題
- 如何配置開始使用？
- 如何自定義工具欄菜單的展示？
- 如何自定義工具欄內(nèi)置菜單的功能？
- 如何自定義擴(kuò)展新功能菜單？
二、解決問題，答案速覽
實(shí)現(xiàn)代碼如下，復(fù)制粘貼即可直接使用。
如果你有時(shí)間，具體問題梳理、代碼分析、知識總結(jié)，可見第三部分。
1、配置開始使用
（1）下載依賴
npm i @wangeditor/editor @wangeditor/editor-for-vue（2）引入css和內(nèi)置組件
// 引入 css
import '@wangeditor/editor/dist/css/style.css'
// 引入 組件
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 引入 接口類型
import { IDomEditor, IEditorConfig } from "@wangeditor/editor";（3）使用
<template>
<div style="border: 1px solid #ccc">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden;"
v-model="valueHtml"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="handleCreated"
/>
</div>
</template>
<script lang="ts" setup>
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { IDomEditor, IEditorConfig } from "@wangeditor/editor";
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
// 編輯器實(shí)例，必須用 shallowRef
const editorRef = shallowRef()
// 內(nèi)容 HTML
const valueHtml = ref('<p>hello</p>')
// 模擬 ajax 異步獲取內(nèi)容
onMounted(() => {
setTimeout(() => {
valueHtml.value = '<p>模擬 Ajax 異步設(shè)置內(nèi)容</p>'
}, 1500)
})
// 工具欄配置
const toolbarConfig = {
toolbarKeys: []
}
// 編輯器配置
const editorConfig = {
placeholder: '請輸入內(nèi)容...',
MENU_CONF: {}
}
// 組件銷毀時(shí)，也及時(shí)銷毀編輯器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
// 組件創(chuàng)建時(shí)
const handleCreated = (editor) => {
editorRef.value = editor // 記錄 editor 實(shí)例，重要！
}
</script>2、自定義工具欄菜單的展示
工具欄菜單的展示，如菜單的順序和分組、添加刪除。
如果想要自定義，只需修改工具欄配置對象的toolbarKeys屬性。toolbarKeys屬性值是一個(gè)數(shù)組，內(nèi)部填寫菜單的key，使用官方API接口editor.getAllMenuKeys()可查詢?nèi)績?nèi)置菜單的key。
// 工具欄配置
const toolbarConfig = {
toolbarKeys: [
// 一些常用的菜單 key
'bold', // 加粗
'italic', // 斜體
'through', // 刪除線
'underline', // 下劃線
'bulletedList', // 無序列表
'numberedList', // 有序列表
'color', // 文字顏色
'insertLink', // 插入鏈接
'fontSize', // 字體大小
'lineHeight', // 行高
'uploadImage', // 上傳圖片
'uploadVideo',//上傳視頻
'delIndent', // 縮進(jìn)
'indent', // 增進(jìn)
'deleteImage',//刪除圖片
'divider', // 分割線
'insertTable', // 插入表格
'justifyCenter', // 居中對齊
'justifyJustify', // 兩端對齊
'justifyLeft', // 左對齊
'justifyRight', // 右對齊
'undo', // 撤銷
'redo', // 重做
'clearStyle', // 清除格式
'fullScreen' // 全屏
]
}3、自定義工具欄內(nèi)置菜單的功能
工具欄菜單的功能，如鏈接、上傳圖片、上傳視頻。
如果想要自定義，只需修改編輯器配置對象的MENU_CONF屬性。不同的功能都對應(yīng)著不同的MENU_CONF屬性值，這里我以問題提出者的問題為示例，具體請參考官方文檔，寫的非常不錯(cuò)的，放下面吧。
https://www.wangeditor.com/v5/menu-config.html.
// 編輯器配置
const editorConfig = {
placeholder: '請輸入內(nèi)容...',
MENU_CONF: {
// 上傳圖片
uploadImage: {
// 自定義選擇圖片
async customBrowseAndUpload(insertFn: InsertFnType) {
// 打開圖片素材庫
photoGalleryDialogVisible.value = true
},
},
// 上傳視頻
uploadVideo: {
// 自定義選擇視頻
async customBrowseAndUpload(insertFn: InsertFnType) {
// 打開視頻素材庫
videoGalleryDialogVisible.value = true
},
},
}
}4、自定義擴(kuò)展新功能菜單
（1）定義菜單class
目前可以自定義擴(kuò)展的功能菜單有按鈕、下拉、下拉面板、模態(tài)框。
新建myButtonMenu.ts文件，把下面代碼放進(jìn)去。
import { IButtonMenu, IDomEditor } from '@wangeditor/editor'
class MyButtonMenu implements IButtonMenu { // TS 語法
// class MyButtonMenu { // JS 語法
constructor() {
this.title = 'My menu title' // 自定義菜單標(biāo)題
// this.iconSvg = '<svg>...</svg>' // 可選
this.tag = 'button'
}
// 獲取菜單執(zhí)行時(shí)的 value ，用不到則返回空 字符串或 false
getValue(editor: IDomEditor): string | boolean { // TS 語法
// getValue(editor) { // JS 語法
return ' hello '
}
// 菜單是否需要激活（如選中加粗文本，“加粗”菜單會激活），用不到則返回 false
isActive(editor: IDomEditor): boolean { // TS 語法
// isActive(editor) { // JS 語法
return false
}
// 菜單是否需要禁用（如選中 H1 ，“引用”菜單被禁用），用不到則返回 false
isDisabled(editor: IDomEditor): boolean { // TS 語法
// isDisabled(editor) { // JS 語法
return false
}
// 點(diǎn)擊菜單時(shí)觸發(fā)的函數(shù)
exec(editor: IDomEditor, value: string | boolean) { // TS 語法
// exec(editor, value) { // JS 語法
if (this.isDisabled(editor)) return
editor.insertText(value) // value 即 this.value(editor) 的返回值
}
}（2）注冊和插入菜單
定義菜單key時(shí)，要保證key唯一，不能和內(nèi)置菜單key重復(fù)。插入菜單時(shí)，將對應(yīng)的菜單key放在toolbarKeys想要的順序位置即可。
import { Boot } from '@wangeditor/editor'
import MyButtonMenu from './myButtonMenu'
// 工具欄配置
const toolbarConfig = {
toolbarKeys: [
// 插入菜單key
'menu1',
]
}
// 組件創(chuàng)建時(shí)
const handleCreated = (editor: IDomEditor) => {
editorRef.value = editor;
const menu1Conf = {
key: 'menu1', // 定義 menu key ：要保證唯一、不重復(fù)（重要）
factory() {
return new MyButtonMenu() // 替換為你菜單的 class
},
}
// 注冊菜單
Boot.registerMenu(menu1Conf)
};三、問題解析，知識總結(jié)
1、如何配置開始使用？
補(bǔ)充幾點(diǎn)注意事項(xiàng)吧，這也是官方提醒：
- editorRef 必須用 shallowRef定義。具體原因待研究，用ref似乎也行。
- 組件銷毀時(shí)，要及時(shí)銷毀編輯器。
2、如何自定義工具欄菜單的展示？
這里補(bǔ)充幾個(gè)官方API：
- editor.getAllMenuKeys() 查詢編輯器注冊的所有菜單 key （可能有的不在工具欄上）
- toolbar.getConfig().toolbarKeys 查看當(dāng)前菜單排序和分組
- 這塊其它API挺雞肋的，不用看了就，寫上搞得代碼很亂，直接在工具欄配置對象里操作就好了，比較清晰，自我感覺哈。
import { DomEditor } from '@wangeditor/editor'
const toolbar = DomEditor.getToolbar(editor)
const toolbarConfig = toolbar.getConfig()
// 查看當(dāng)前菜單排序和分組
console.log( toolbarConfig.toolbarKeys )3、如何自定義工具欄內(nèi)置菜單的功能？
這里有通用的操作，參考官方，分兩步實(shí)現(xiàn)：
4、如何自定義擴(kuò)展新功能菜單？
這里官方提供了三處參考：定義新菜單、定義插件、定義新元素。
我認(rèn)為定義新菜單是比較常用的，這樣其實(shí)已經(jīng)就很靈活了。至于其他兩項(xiàng)有需求的朋友，可以自行研究一番，可能比較燒哈。
最后插一句，WangEditor這個(gè)庫，寫的真是挺不錯(cuò)的！
責(zé)任編輯：姜華
來源：
今日頭條
