Vue3问题：如何使用WangEditor富文本？能自定义才是真的会用！

笔者 | 大澈

大家好，我是大澈！

今天的问题，来自于上周末问题留言的朋友 嘻嘻哈哈。

欢迎大家在周末的问题留言推文中，积极进行问题留言，把这周工作日遇到的问题，分享给大家瞧瞧，或者直接进问答群，一起交流唠唠。

遇到难题，遇到有共鸣的问题，一起讨论，一起沉淀，一起成长。

ONE

需求分析，问题描述

一、需求

使用富文本进行内容编辑，要求自定义工具栏菜单顺序及其分组，并且要求自定义选择图片、自定义选择视频。

二、问题

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、使用

<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'

    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // 内容 HTML
    const valueHtml = ref('<p>hello</p>')

    // 模拟 ajax 异步获取内容
    onMounted(() => {
        setTimeout(() => {
            valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
        }, 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 实例，重要！
    }
</script>

二、自定义工具栏菜单的展示

工具栏菜单的展示，如菜单的顺序和分组、添加删除。

如果想要自定义，只需修改工具栏配置对象的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 = '<svg>...</svg>' // 可选
        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 ) 

三、如何自定义工具栏内置菜单的功能？

这里有通用的操作，参考官方，分两步实现：

四、如何自定义扩展新功能菜单？

这里官方提供了三处参考：定义新菜单、定义插件、定义新元素。

我认为定义新菜单是比较常用的，这样其实已经就很灵活了。至于其他两项有需求的朋友，可以自行研究一番，可能比较烧哈。

最后插一句，WangEditor这个库，写的真是挺不错的！

- END -