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: '<svg></svg>',
            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'

　　<Toolbar

      style="border-bottom: 1px solid #ccc"

      :editor="editorRef"

      :defaultConfig="toolbarConfig"

      :mode="mode"

    />

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

 

这里group-image等是菜单组，即把多个菜单放到一个分类下，这里我又不得不吐槽一下文档了，其他都能理解，但是有一个iconSvg属性，就是该分组菜单的图标，如果不写则使用title的文字显示，显然使用icon会美观咯。

v4可以很方便的使用font-class引用，v5这里必须是使用svg图片。但是查边所有文档，都不找到编辑默认的svg在哪里，当然你非要说使用其它第三方的svg也不是不可以，我尝试了一下阿里icon的，各种问题，时间就是金钱，我不能花几个小时在svg图片调试上啊，最后通过以下方式，打印出来了编辑本身的部分图标。

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

 

 

至此工具栏配置完毕，最终显示如下：

 

 

 

 

 

 

3、参考

https://www.shuanghei.com/article/2022/05/6276634f5a586c4b3fcbadf0.html