@ -16,8 +16,8 @@ keywords: menu menuitem menuitems
The methods for adding custom menu items are in the UI Registry part of the editor API editor.ui.registry. The API has three methods for adding menu items:
> Note: The identifier used to create the menu item must be included in the [`menu`](https://www.tiny.cloud/docs-beta/configure/editor-appearance/#menu) option in the TinyMCE configuration for it to be added to the menubar's menus. It will not be added to the menubar's menus if `menu` is not configured correctly.
> Note: The identifier used to create the menu item must be included in the [`menu`]({{site.baseurl}}/configure/editor-appearance/#menu) option in the TinyMCE configuration for it to be added to the menubar's menus. It will not be added to the menubar's menus if `menu` is not configured correctly.
## Types of menu items
@ -78,6 +77,15 @@ A basic menu item triggers its `onAction` function when clicked.
| isDisabled | () => boolean | Checks if the menu item is disabled. |
| setDisabled | (state: boolean) => void | Sets the menu item's disabled state. |
#### Example
```js
editor.ui.registry.addMenuItem('basicitem', {
text: 'My basic menu item',
onAction: () => alert('Menu item clicked')
});
```
### Nested menu items
A nested menu item is a menu item with a submenu. Registering a submenu this way allows it to be reused in menubar menus and toolbar button menus without having to define the submenu twice. The submenu can contain any combination of basic menu items and toggle menu items.
@ -97,6 +105,21 @@ A nested menu item is a menu item with a submenu. Registering a submenu this way
| isDisabled | () => boolean | Checks if the menu item is disabled. |
| setDisabled | (state: boolean) => void | Sets the menu item's disabled state. |
A toggle menu item triggers its `onAction` when clicked. It also has a concept of state. This means it can be toggled `on` and `off`. A toggle menu item gives the user visual feedback for its state through a checkmark that appears to the left of the menu item's text when it is `on`.
@ -121,4 +144,21 @@ A toggle menu item triggers its `onAction` when clicked. It also has a concept o
| isActive | () => boolean | Checks if the menu item is active. |
| setActive | (state: boolean) => void | Sets the menu item's active state. |
| isDisabled | () => boolean | Checks if the menu item is disabled. |
| setDisabled | (state: boolean) => void | Sets the menu item's disabled state. |
| setDisabled | (state: boolean) => void | Sets the menu item's disabled state. |