buttonDef
Release 2.4.0+
Definitions for plugin buttons exposed on the toolbar, menu, or balloon popups.
Common Keys
| Key | Type | Description |
|---|---|---|
name | string | Button name. Used when registering on editor.toolbar, editor.balloon, etc. — must be unique. If omitted in a single-button plugin, defaults to the plugin name; required when a plugin defines multiple buttons. |
label | string | Button label — shown as a tooltip. |
type | string | Release 2.7.0+ 'button' (default) or 'dropdown'. |
iconSVG | string | SVG markup or an <img> tag for the button icon. |
iconName | string | Reuses an icon already registered with the editor by name (used when iconSVG is not set). |
label is shown as a tooltip on hover:
Button (type: 'button')
| Key | Type | Description |
|---|---|---|
onClickFunc | function | Runs when the button is clicked. |
{
onClickFunc: function (event) {
// ...
}
}
Dropdown (type: 'dropdown')
Release 2.7.0+
| Key | Type | Description |
|---|---|---|
onClickFunc | function | Runs when the dropdown is clicked. For a split-button dropdown (isSingle: false), runs on click of the leading button. |
isSingle | boolean | true (default) — single dropdown. false — split-button dropdown. |
useIcon | boolean | false (default) — text dropdown. true — icon dropdown. |
dropdownItems | object[] | Dropdown items. |
onClickFunc behavior:
isSingle — single vs. split-button dropdown:
useIcon — icon vs. text dropdown:
dropdownItems example:
{
type: 'dropdown',
isSingle: true,
useIcon: false,
dropdownItems: [
{ label: 'Item 1' },
{ label: 'Item 2' },
{ label: 'Item 3' }
]
}
Dropdown Items (dropdownItems)
| Key | Type | Description |
|---|---|---|
label | string | Item label. |
onClickFunc | function | Runs when the item is clicked. |
cssText | string | Inline CSS applied to the item. |
label rendering:
onClickFunc behavior:
cssText styling:
{
dropdownItems: [
{ label: 'Item 1', cssText: 'font-size: 20px; color: orange;' },
{
label: 'Item 2',
cssText: 'font-size: 15px; color: red;',
onClickFunc: function () { /* ... */ }
}
]
}