Toolbar Config

If you first-time use wangEditor, please see Get Started it to learn basic usage.

import { IToolbarConfig } from '@wangeditor/editor'

const toolbarConfig: Partial<IToolbarConfig> = {   // TS syntax
// const toolbarConfig = {                         // JS syntax
    /* your toolbar config */

// create toolbar, or Vue React <Toolbar>



Use toolbar.getConfig() to checkout default toolbar config.
If you use Vue or React, you can get toolbar instance by these codes.

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


Rewrite toolbar menus, re-order and re-group.

  • toolbar.getConfig().toolbarKeys checkout default toolbarKeys config.
  • editor.getAllMenuKeys() checkout all embedded menu keys.
toolbarConfig.toolbarKeys = [
    // menu key

    // split line

    // menu key
    'bold', 'italic',

    // menu group, includes many menu
        key: 'group-more-style', // required, must start with `group-`
        title: 'more', // required
        iconSvg: '<svg>....</svg>', // optional
        menuKeys: ["through", "code", "clearStyle"] // required, children menu keys
    // other menu keys...


You may only want to exclude some menus, and keep the rest.

toolbarConfig.excludeKeys = [
    'group-more-style' // exclude menu-group

If you want to exclude a menu group, you can find it's key by toolbar.getConfig().toolbarKeys


You may want to append the modal when a menu clicked to <body>, and custom its position style.

toolbarConfig.modalAppendToBody = true

// Create toolbar and editor

// Observe `modalOrPanelShow` and `modalOrPanelHide` custom event, then set modal style, and even you can show a mask <div>
editor.on('modalOrPanelShow', modalOrPanel => {
    if (modalOrPanel.type !== 'modal') return
    const { $elem } = modalOrPanel // modal element

    // set modal style (position, z-index)
    // show a mask <div>
editor.on('modalOrPanelHide', () => {
    // hide your mask <div>

You could checkout example source codeopen in new window.

Last Updated:
Contributors: 王福朋