![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/03cc25a4758d4ca891696035efe336ea~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=900&h=383&s=31330&e=jpg&b=1856b2) ****

笔者 | 大澈

### 大家好，我是大澈！今天的问题，来自于上周末问题留言的朋友 **嘻嘻哈哈**。 ![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4cc8de3e8b9e42c7a50cacd32889ed1a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=612&h=218&s=39552&e=png&b=ececec)欢迎大家在周末的问题留言推文中，积极进行问题留言，把这周工作日遇到的问题，分享给大家瞧瞧，或者直接进问答群，一起交流唠唠。遇到难题，遇到有共鸣的问题，一起讨论，一起沉淀，一起成长。 ### ***ONE*** ***需求分析，问题描述*** **一、需求** 使用富文本进行内容编辑，要求自定义工具栏菜单顺序及其分组，并且要求自定义选择图片、自定义选择视频。 ![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5d84572f16e4b419a78430cae24a251~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=920&h=401&s=6504&e=png&b=fefefe) **二、问题** 1、如何配置开始使用？ 2、如何自定义工具栏菜单的展示？ 3、如何自定义工具栏内置菜单的功能？ 4、如何自定义扩展新功能菜单？ ### ***TWO*** ***解决问题，答案速览*** 实现代码如下，复制粘贴即可直接使用。如果你有时间，具体问题梳理、代码分析、知识总结，可见第三部分。 **一、配置开始使用** 1、下载依赖 ``` npm i @wangeditor/editor @wangeditor/editor-for-vue ``` 2、引入css和内置组件 ``` // 引入 css import '@wangeditor/editor/dist/css/style.css' // 引入组件 import { Editor, Toolbar } from '@wangeditor/editor-for-vue' // 引入接口类型 import { IDomEditor, IEditorConfig } from "@wangeditor/editor"; ``` 3、使用 ``` 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' // 编辑器实例，必须用 shallowRef const editorRef = shallowRef() // 内容 HTML const valueHtml = ref('

hello

') // 模拟 ajax 异步获取内容 onMounted(() => { setTimeout(() => { valueHtml.value = '

模拟 Ajax 异步设置内容

' }, 1500) }) // 工具栏配置 const toolbarConfig = { toolbarKeys: [] } // 编辑器配置 const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} } // 组件销毁时，也及时销毁编辑器 onBeforeUnmount(() => { const editor = editorRef.value if (editor == null) return editor.destroy() }) // 组件创建时 const handleCreated = (editor) => { editorRef.value = editor // 记录 editor 实例，重要！ } ``` **二、自定义工具栏菜单的展示** 工具栏菜单的展示，如菜单的顺序和分组、添加删除。如果想要自定义，只需修改工具栏配置对象的toolbarKeys属性。toolbarKeys属性值是一个数组，内部填写菜单的key，使用官方API接口**editor.getAllMenuKeys()** 可查询全部内置菜单的key。 ``` // 工具栏配置 const toolbarConfig = { toolbarKeys: [ // 一些常用的菜单 key 'bold', // 加粗 'italic', // 斜体 'through', // 删除线 'underline', // 下划线 'bulletedList', // 无序列表 'numberedList', // 有序列表 'color', // 文字颜色 'insertLink', // 插入链接 'fontSize', // 字体大小 'lineHeight', // 行高 'uploadImage', // 上传图片 'uploadVideo',//上传视频 'delIndent', // 缩进 'indent', // 增进 'deleteImage',//删除图片 'divider', // 分割线 'insertTable', // 插入表格 'justifyCenter', // 居中对齐 'justifyJustify', // 两端对齐 'justifyLeft', // 左对齐 'justifyRight', // 右对齐 'undo', // 撤销 'redo', // 重做 'clearStyle', // 清除格式 'fullScreen' // 全屏 ] } ``` **三、自定义工具栏内置菜单的功能** 工具栏菜单的功能，如链接、上传图片、上传视频。如果想要自定义，只需修改编辑器配置对象的MENU_CONF属性。不同的功能都对应着不同的MENU_CONF属性值，这里我以问题提出者的问题为示例，具体请参考官方文档，写的非常不错的，放下面吧。 https://www.wangeditor.com/v5/menu-config.html ``` // 编辑器配置 const editorConfig = { placeholder: '请输入内容...', MENU_CONF: { // 上传图片 uploadImage: { // 自定义选择图片 async customBrowseAndUpload(insertFn: InsertFnType) { // 打开图片素材库 photoGalleryDialogVisible.value = true }, }, // 上传视频 uploadVideo: { // 自定义选择视频 async customBrowseAndUpload(insertFn: InsertFnType) { // 打开视频素材库 videoGalleryDialogVisible.value = true }, }, } } ``` **四、自定义扩展新功能菜单** 1、定义菜单class 目前可以自定义扩展的功能菜单有按钮、下拉、下拉面板、模态框。新建myButtonMenu.ts文件，把下面代码放进去。 ``` import { IButtonMenu, IDomEditor } from '@wangeditor/editor' class MyButtonMenu implements IButtonMenu { // TS 语法 // class MyButtonMenu { // JS 语法 constructor() { this.title = 'My menu title' // 自定义菜单标题 // this.iconSvg = '' // 可选 this.tag = 'button' } // 获取菜单执行时的 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 } // 点击菜单时触发的函数 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时，要保证key唯一，不能和内置菜单key重复。插入菜单时，将对应的菜单key放在toolbarKeys想要的顺序位置即可。 ``` import { Boot } from '@wangeditor/editor' import MyButtonMenu from './myButtonMenu' // 工具栏配置 const toolbarConfig = { toolbarKeys: [ // 插入菜单key 'menu1', ] } // 组件创建时 const handleCreated = (editor: IDomEditor) => { editorRef.value = editor; const menu1Conf = { key: 'menu1', // 定义 menu key ：要保证唯一、不重复（重要） factory() { return new MyButtonMenu() // 替换为你菜单的 class }, } // 注册菜单 Boot.registerMenu(menu1Conf) }; ``` ### ***THREE*** ***问题解析，知识总结*** **一、如何配置开始使用？** 补充几点注意事项吧，这也是官方提醒： 1、editorRef 必须用 shallowRef定义。具体原因待研究，用ref似乎也行。 2、组件销毁时，要及时销毁编辑器。 **二、如何自定义工具栏菜单的展示？** 这里补充几个官方API： 1、editor.getAllMenuKeys() 查询编辑器注册的所有菜单 key （可能有的不在工具栏上） 2、toolbar.getConfig().toolbarKeys 查看当前菜单排序和分组 3、这块其它API挺鸡肋的，不用看了就，写上搞得代码很乱，直接在工具栏配置对象里操作就好了，比较清晰，自我感觉哈。 ``` import { DomEditor } from '@wangeditor/editor' const toolbar = DomEditor.getToolbar(editor) const toolbarConfig = toolbar.getConfig() // 查看当前菜单排序和分组 console.log( toolbarConfig.toolbarKeys ) ``` **三、如何自定义工具栏内置菜单的功能？** 这里有通用的操作，参考官方，分两步实现： ![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/012bcc4af2d8426fb7a4f56f2e12c80c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1080&h=502&s=102274&e=png&b=22272e)**** ******四、如何自定义扩展新功能菜单？** 这里官方提供了三处参考：定义新菜单、定义插件、定义新元素。我认为定义新菜单是比较常用的，这样其实已经就很灵活了。至于其他两项有需求的朋友，可以自行研究一番，可能比较烧哈。![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/079a94363bab41cc96736ddc39865803~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=650&h=657&s=39397&e=png&b=22272e) ### **最后插一句，WangEditor这个库，写的真是挺不错的！** ###

- END -

###