vue3 wangEditor-v5 进行 工具栏配置

官网

https://www.wangeditor.com/v5/for-frame.html#vue3

1、查看所有工具栏

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    // 查看所有工具栏key
    console.log(editor.getAllMenuKeys())
}

详细如下（2022-06-22  为60个）
 ['bold', 'underline', 'italic', 'through', 'code', 'sub', 'sup', 'clearStyle', 'color',
 'bgColor', 'fontSize', 'fontFamily', 'indent', 'delIndent', 'justifyLeft', 'justifyRight',
 'justifyCenter', 'justifyJustify', 'lineHeight', 'insertImage', 'deleteImage', 'editImage', 'viewImageLink',
 'imageWidth30', 'imageWidth50', 'imageWidth100', 'divider', 'emotion', 'insertLink', 'editLink', 'unLink',
 'viewLink', 'codeBlock', 'blockquote', 'headerSelect', 'header1', 'header2', 'header3', 'header4', 'header5',
 'todo', 'redo', 'undo', 'fullScreen', 'enter', 'bulletedList', 'numberedList', 'insertTable', 'deleteTable',
 'insertTableRow', 'deleteTableRow', 'insertTableCol', 'deleteTableCol', 'tableHeader', 'tableFullWidth',
 'insertVideo', 'uploadVideo', 'editVideoSize', 'uploadImage', 'codeSelectLang']

2、过滤并根据实际需求配置

const toolbarConfig = {
    /* 工具栏配置 */
    toolbarKeys: [
        'bold',
        'clearStyle',
        'color',
        'bgColor',
        '|',
        // 菜单组，包含多个菜单
        {
            key: 'group-image', // 必填，要以 group 开头
            title: '图片', // 必填
            iconSvg: '',
            menuKeys: ['uploadImage', 
                'insertImage', 
                'deleteImage', 
                'editImage', 
                'viewImageLink']
        },
        {
            key: 'group-video',
            title: '视频',
            iconSvg: '',
            menuKeys: ['insertVideo',
                'uploadVideo']
        },
        {
            key: 'group-link',
            title: '链接',
            menuKeys: ['insertLink', 'editLink', 'unLink', 'viewLink']
        },
        {
            key: 'group-table',
            title: '表格',
            menuKeys: ['insertTable',
                'deleteTable',
                'insertTableRow',
                'deleteTableRow',
                'insertTableCol',
                'deleteTableCol',
                'tableHeader',
                'tableFullWidth']
        },
        'divider',
        'emotion',
        'blockquote',
        'headerSelect',
        'redo',
        'undo',
        'fullScreen'
     ]
}

配置

import { toolbarKeys } from './toolbar'

const toolbarConfig = {
    toolbarKeys,
    // excludeKeys: [
    //    'fullScreen'
    // ]
}

import { DomEditor } from '@wangeditor/editor'
const handleBlur = () => {
    const editor = editorRef.value
    const toolbar = DomEditor.getToolbar(editor)
    console.log(toolbar.getConfig().toolbarKeys)
}