Toolbar Config
If you first-time use wangEditor, please see Get Started it to learn basic usage.
import { IToolbarConfig, createToolbar } from '@wangeditor/editor'
const toolbarConfig: Partial<IToolbarConfig> = {
/* your toolbar config */
}
// create toolbar
const toolbar = createToolbar({
editor,
selector: '#toolbar-container',
config: toolbarConfig,
mode: 'default'
})
getConfig
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)
toolbarKeys
Rewrite toolbar menus, re-order and re-group.
toolbar.getConfig().toolbarKeyscheckout defaulttoolbarKeysconfig.editor.getAllMenuKeys()checkout all embedded menu keys.
const toolbarConfig: Partial<IToolbarConfig> = {
toolbarKeys: [
// menu key
'headerSelect',
// 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...
]
}
// create toolbar
insertKeys
You may only want to insert some new menus, based on current toolbarKeys.
const toolbarConfig: Partial<IToolbarConfig> = {
insertKeys: {
index: 5, // inserted index, in current toolbarKeys
keys: ['menu-key1', 'menu-key2']
},
}
// create toolbar
excludeKeys
You may only want to exclude some menus, and keep the rest.
const toolbarConfig: Partial<IToolbarConfig> = {
excludeKeys: [
'headerSelect',
'italic',
'group-more-style' // exclude menu-group
]
}
// create toolbar
If you want to exclude a menu group, you can find it's key by toolbar.getConfig().toolbarKeys
modalAppendToBody
You may want to append the modal when a menu clicked to <body>, and custom its position style.
const toolbarConfig: Partial<IToolbarConfig> = {
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 code.