Creating custom Menu toolbar buttons
A toolbar menu button is a toolbar button that opens a menu when clicked. This menu can also contain submenus. This is useful for grouping together actions that would otherwise be several buttons on the toolbar. It can also be used to reduce visual clutter and save UI space, as menubar menu items and some toolbar buttons could be moved into a toolbar menu button. Potentially, all menubar menu items could be moved into toolbar menu buttons, allowing for the editor to be used without a menubar at all.
For example: The table plugin’s table
toolbar button opens a menu similar to the menubar Table menu.
Options
Name | Value | Requirement | Description |
---|---|---|---|
fetch |
|
required |
Function that takes a callback which must be passed the list of options for the button’s dropdown. |
text |
string |
optional |
Text to display if no icon is found. |
icon |
string |
optional |
Name of the icon to be displayed. Must correspond to an icon: in the icon pack, in a custom icon pack, or added using the |
tooltip |
string |
optional |
Text for button tooltip. |
onSetup |
|
optional |
default: |
API
Name | Value | Description |
---|---|---|
isEnabled |
|
Checks if the button is enabled. |
setEnabled |
|
Sets the button’s enabled state. |
Menu button example and explanation
The following is a simple toolbar menu button example:
This example configures a toolbar menu button with the label My Button
that opens the specified menu when clicked. The top-level menu contains two items. The first menu item inserts content when clicked and the second menu item opens a submenu containing two menu items which insert content when clicked.
The fetch
function is called when the toolbar menu button’s menu is opened. It is a function that takes a callback and passes it an array of menu items to be rendered in the drop-down menu. This allows for asynchronous fetching of the menu items.
Using onSetup
onSetup
is a complex property. It takes a function that is passed the component’s API and should return a callback that is passed the component’s API and returns nothing. This occurs because onSetup
runs whenever the component is rendered, and the returned callback is executed when the component is destroyed. This is essentially an onTeardown
handler, and can be used to unbind events and callbacks.
To clarify, in code onSetup
may look like this:
onSetup: (api) => {
// Do something here on component render, like set component properties or bind an event listener
return (api) => {
// Do something here on teardown, like unbind an event listener
};
};
To bind a callback function to an editor event use editor.on(eventName, callback)
. To unbind an event listener use editor.off(eventName, callback)
. Any event listeners should be unbound in the teardown callback. The only editor event which does not need to be unbound is init
e.g. editor.on('init', callback)
.
|