You clicked the main button
'), onItemAction: (api, value) => editor.insertContent(value), fetch: (callback) => { const items = [ { type: 'choiceitem', icon: 'notice', text: 'Menu item 1', value: ' You clicked menu item 1!' }, { type: 'choiceitem', icon: 'warning', text: 'Menu item 2', value: ' You clicked menu item 2!' } ]; callback(items); } }); }, content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }' }); ``` A split button is similar to a basic button in that they both require an `onAction` callback. The `onAction` callback function should take the button’s API and return nothing. It is called when the basic button section is clicked. In this example, `onAction` calls `editor.insertContent(value)` which inserts the given content into the editor. `onItemAction` is called when a menu item is clicked. The callback function is passed the split button’s API and the *value* of the selected menu item. Nothing should be returned. The example calls `editor.insertContent(value)` to insert the *value* into the editor’s content. The `fetch` function is called whenever the split button’s drop-down menu is opened. It is a function that takes a callback and passes it an array of menu items to be rendered in the button’s drop-down menu. This allows for asynchronous fetching of the menu items. ## Choice menu items Choice menu items are a special type of menu item used for split toolbar button menu items. For information on split buttons, see: [Split toolbar buttons](#). ### Options | Name | Value | Requirement | Description | | --- | --- | --- | --- | | value | any | required | A value that is passed to `onItemAction` when the choice menu item is clicked. | | text | string | optional | Text to display. | | icon | string | optional | Name of the icon to be displayed. Must correspond to an icon: in the [icon pack](../editor-icon-identifiers/), in a [custom icon pack](../creating-an-icon-pack/), or added using the [`addIcon` API](../apis/tinymce.editor.ui.registry/#addIcon). | | enabled | boolean | optional | default: `true` - Represents the menu item’s state. When `false`, the menu item is unclickable. Toggled by the menu item’s API. | | shortcut | string | optional | Text to display in the shortcut label. To register a shortcut, see: [Add custom shortcuts to TinyMCE](../shortcuts/). | For an example of how choice menu items are used in split toolbar buttons, see: [Split button example and explanation](#split-button-example-and-explanation). ## Using `onSetup` `onSetup` accepts a function that receives the component’s API. This function should return a callback that returns nothing after being passed the component’s API. This occurs because `onSetup` runs whenever the component is rendered, and the callback returned by `onSetup` is executed when the component is destroyed. The function returned from `onSetup` is essentially an `onTeardown` handler, and can be used to unbind events and callbacks. To clarify, in code `onSetup` may look like this: ```js onSetup: (api) => { // Runs when the component is created // Configure the component or bind event listeners return (api) => { // Runs when the component is destroyed // Unbind event listeners or clean up resources }; }; ``` To bind a callback function to an editor event use [`editor.on(eventName, callback)`](../apis/tinymce.editor/#on). To unbind an event listener use [`editor.off(eventName, callback)`](../apis/tinymce.editor/#off). 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)`. > **Note:** > - The callback function passed to `editor.off()` should be the same function passed to `editor.on()`. For example, if an `editorEventCallback` function is bound to the `NodeChange` event when the button is created, `onSetup` should return `(api) => editor.off('NodeChange', editorEventCallback)`. > - If `onSetup` does not register any event listeners or only listens to the `init` event, `onSetup` can return an empty function e.g. `return () => {};`.