工具栏配置

如果是第一次使用，请先通过 快速开始 了解基本使用。

TIP

wangEditor 从 V5 版本开始，工具栏配置和菜单配置（如配置颜色、字体、链接校验、上传图片等）分离了。本文只讲工具栏配置。

  1. import { IToolbarConfig, createToolbar } from '@wangeditor/editor'
  3. const toolbarConfig: Partial<IToolbarConfig> = {
  4.     /* 工具栏配置 */
  5. }
  7. // 创建工具栏
  8. const toolbar = createToolbar({
  9.   editor,
  10.   selector: '#toolbar-container',
  11.   config: toolbarConfig
  12.   mode: 'default'
  13. })

getConfig

可通过 toolbar.getConfig() 查看工具栏的默认配置。
如果你使用 Vue React ，可以通过如下代码获取 toolbar 实例

  1. import { DomEditor } from '@wangeditor/editor'
  2. const toolbar = DomEditor.getToolbar(editor)

toolbarKeys

重新配置工具栏，显示哪些菜单，以及菜单的排序、分组。

  • toolbar.getConfig().toolbarKeys 查看当前的默认配置
  • editor.getAllMenuKeys() 查询编辑器注册的所有菜单 key
  1. const toolbarConfig: Partial<IToolbarConfig> = {
  2.     toolbarKeys: [
  3.         // 菜单 key
  4.         'headerSelect',
  6.         // 分割线
  7.         '|',
  9.         // 菜单 key
  10.         'bold', 'italic',
  12.         // 菜单组，包含多个菜单
  13.         {
  14.             key: 'group-more-style', // 必填，要以 group 开头
  15.             title: '更多样式', // 必填
  16.             iconSvg: '<svg>....</svg>', // 可选
  17.             menuKeys: ["through", "code", "clearStyle"] // 下级菜单 key ，必填
  18.         },
  19.         // 继续配置其他菜单...
  20.     ]
  21. }
  23. // 创建 toolbar

insertKeys

可以在当前 toolbarKeys 的基础上继续插入新菜单，如自定义扩展的菜单。

  1. const toolbarConfig: Partial<IToolbarConfig> = {
  2.     insertKeys: {
  3.         index: 5, // 插入的位置，基于当前的 toolbarKeys
  4.         keys: ['menu-key1', 'menu-key2']
  5.     },
  6. }
  8. // 创建 toolbar

excludeKeys

如果仅仅想排除掉某些菜单，其他都保留，可以使用 excludeKeys 来配置。
可通过 toolbar.getConfig().toolbarKeys 查看工具栏的默认配置

  1. const toolbarConfig: Partial<IToolbarConfig> = {
  2.     excludeKeys: [
  3.         'headerSelect',
  4.         'italic',
  5.         'group-more-style' // 排除菜单组，写菜单组 key 的值即可
  6.     ]
  7. }
  9. // 创建 toolbar

如果你想排除某个菜单组，可通过 toolbar.getConfig().toolbarKeys 找到这个菜单组的 key 。

工具栏配置 - 图1

modalAppendToBody

将菜单弹出的 modal 添加到 body 下，并自定义 modal 的定位和其他样式。

工具栏配置 - 图2

  1. const toolbarConfig: Partial<IToolbarConfig> = {
  2.     modalAppendToBody: true
  3. }
  5. // 创建 toolbar 和 editor
  7. // 可监听 `modalOrPanelShow` 和 `modalOrPanelHide` 自定义事件来设置样式、蒙层
  8. editor.on('modalOrPanelShow', modalOrPanel => {
  9.     if (modalOrPanel.type !== 'modal') return
  10.     const { $elem } = modalOrPanel // modal element
  12.     // 设置 modal 样式（定位、z-index）
  13.     // 显示蒙层
  14. })
  15. editor.on('modalOrPanelHide', () => {
  16.     // 隐藏蒙层
  17. })

上述代码细节可以参考 example 源码工具栏配置 - 图3open in new window