Toolbar Extensions

Through toolbar extensions, you can add custom menu groups to the toolbar for personalized configuration. You can also integrate with the page aside to add custom content or manually control the toolbar’s visibility.

Use Cases

• Group toolbar actions by business domain (office tools / review / AI, etc.)
• Role-based toolbars: show different entries for editors, reviewers, and read-only users
• Promote high-frequency actions into first-level entry points (export, tables, asset library)
• Inject enterprise-specific buttons via slots (approve, archive, publish, sync to external systems)
• Reuse one editor across products with different menus configurations

Works Well With

• Page Aside: the toolbar triggers actions, the aside hosts complex UI and workflows: Page Aside
• AI: surface Assistant/Chat entry points and keep full interactions in the aside: AI
• Import/Export: put common import/export actions into dedicated groups: Import, Export
• Track Changes and Comments: give reviewers clear one-click review entry points: Track Changes, Comments
• Content Locking and Templates: make lock/unlock/apply template actions easy to reach: Content Locking, Template Management

Default Configuration

const defaultOptions = {
  // Toolbar extension configuration
  toolbar: {
    menus: [
      'base',
      'insert',
      'table',
      'tools',
      'page',
      'view',
      'import',
      'export',
    ],
    extensions: [],
  },
}

Configuration Description

toolbar.extensions

Description：Toolbar menu group extension.

Type：Array

Default Value：[]

Example

extensions: [
  { title: 'Office Assistant', key: 'office' },
  { title: 'Extension Plugins', key: 'plugins' },
]

Each item in the array represents a group.

Configuration Items

• title：Group display name.
• key：Group unique identifier, is the important basis for slot injection, must be unique and cannot be duplicated with default group identifier. Values such as base, insert, table, tools, page, and export cannot be set.

Slot Configuration

The slot setting is the same as the standard toolbar slot format, the identifier is #toolbar_{key} and is processed based on the key value in the extension configuration item.

Other toolbar slot configurations see Slot List.

Example

<template #toolbar_office="props">
  <span>toolbar_office slot：{{ props }}</span>
</template>
<template #toolbar_plugins="props">
  <span>toolbar_plugins slot：{{ props }}</span>
</template>