Data
/
tinymce-docs
mirror of https://github.com/tinymce/tinymce-docs.git
2
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

DOC-182: Added the new menu item to the navigation and did some minor restructuring to keep the menu item types in alphabetical order

pull/936/head
Lee Newson 7 years ago
parent
05930b4841
commit
8a6c295a2b
3 changed files with 36 additions and 24 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      _data/nav.yml
  2. 9
      migration-from-4x.md
  3. 46
      ui-components/menuitems.md

5
_data/nav.yml
View File

@ -478,6 +478,11 @@
- url: "#Form API"
- url: "#Example configuration"
- url: "customsidebar"
- url: "menuitems"
pages:
- url: "#Basic menu items"
- url: "#Nested menu items"
- url: "#Toggle menu items"
- url: "toolbarbuttons"
- url: "typesoftoolbarbuttons"
pages:

9
migration-from-4x.md
View File

@ -180,7 +180,7 @@ The methods for registering components have moved to a different part of the edi
| -------------- | -------------- | ------------- |
| editor.addButton(identifier, configuration) | editor.ui.registry.addButton(identifier, configuration) | [Toolbar Buttons]({{site.baseurl}}/ui-components/typesoftoolbarbuttons/) |
| editor.addContextToolbar: (name, spec) | editor.ui.registry.addContextToolbar | [Context toolbar]({{site.baseurl}}/ui-components/contexttoolbar/) |
| editor.addMenuItem: (name, spec) | editor.ui.registry.addMenuItem | [Menu Item]({{site.baseurl}}/migration-from-4x/#custommenuitems) |
| editor.addMenuItem: (name, spec) | editor.ui.registry.addMenuItem | [Menu item]({{site.baseurl}}/ui-components/menuitems/#basicmenuitems) |
| editor.addSidebar: (name, spec) | editor.ui.registry.addSidebar: (name, spec) | [Sidebar]({{site.baseurl}}/ui-components/customsidebar/)|
#### New methods
@ -193,10 +193,10 @@ The following new methods have been added for creating and using new components:
| editor.ui.registry.addContextForm: (name, spec) | [Context form]({{site.baseurl}}/ui-components/contextform/) |
| editor.ui.registry.addContextMenu: (name, spec) | [Context menu]({{site.baseurl}}/ui-components/contextmenu/) |
| editor.ui.registry.addMenuButton: (name, spec) | [Menu Button]({{site.baseurl}}/ui-components/typesoftoolbarbuttons/#menubutton) |
| editor.ui.registry.addNestedMenuItem: (name, spec) | [Nested Menu Item]({{site.baseurl}}/migration-from-4x/#custommenuitems) |
| editor.ui.registry.addNestedMenuItem: (name, spec) | [Nested menu item]({{site.baseurl}}/ui-components/menuitems/#nestedmenuitems) |
| editor.ui.registry.addSplitButton: (name, spec) | [Split Button]({{site.baseurl}}/ui-components/typesoftoolbarbuttons/#splitbutton) |
| editor.ui.registry.addToggleButton: (name, spec) | [Toggle Button]({{site.baseurl}}/ui-components/typesoftoolbarbuttons/#togglebutton) |
| editor.ui.registry.addToggleMenuItem: (name, spec) | [Toggle menu item]({{site.baseurl}}/migration-from-4x/#custommenuitems) |
| editor.ui.registry.addToggleMenuItem: (name, spec) | [Toggle menu item]({{site.baseurl}}/ui-components/menuitems/#togglemenuitems) |
| editor.ui.registry.addIcon: (name, svgData) | Registers an SVG as an icon |
| editor.ui.registry.getAll: () | Returns an array of everything in the UI registry |
@ -369,7 +369,8 @@ editor.ui.registry.addMenuItem('example', {
onAction: () => editor.insertContent('Hello world!!');
});
```
<!-- Docs are coming soon! -->
For more information on how these methods have changed, see [docs]({{site.baseurl}}/ui-components/menuitems/).
### Custom dialogs

46
ui-components/menuitems.md
View File

@ -1,4 +1,10 @@
# Custom Menu Items
---
layout: default
title: Custom menu items
title_nav: Custom menu items
description: This section demonstrates different types of menu items.
keywords: menu menuitem menuitems
---
## Use Cases
@ -42,19 +48,19 @@ tinymce.init({
> 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.
# Types of Menu Items
## Types of menu items
There are three types of menu items in TinyMCE 5.0:
* Basic menu items
* Toggle menu items
* Nested menu items
* Toggle menu items
## Basic Menu Items
### Basic menu items
A basic menu item triggers its `onAction` function when clicked.
### Config options
#### Config options
| Name | Value | Requirement | Description |
| ---- | ----- | ----------- | ----------- |
@ -72,47 +78,47 @@ 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. |
## Toggle Menu Item
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`.
### Nested menu items
### Config options
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.
| Name | Value | Requirement | Description |
| ---- | ----- | ----------- | ----------- |
| 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. |
| value | string | optional | A value to associate with the menu item. |
| active | boolean | optional | Initial state value for the toggle menu item |
| disabled | boolean | optional | default: false - Represents the menu item's state. When true, the menu item is unclickable. Toggled by the menu item's API. |
| onSetup | (api) => (api) => void | optional | default: () => () => {} - Function invoked when the menu item is rendered, each time its menu is opened. |
| onAction | (api) => void | required | Function invoked when the menu item is clicked. |
> Note: Toggle menu items do not have icons.
| getSubmenuItems | () => string or MenuItem[] | required | Function invoked when the menu item is clicked to open its submenu. Must return either a space separated string of registered menu names or an array of basic, toggle or nested menu items specifications. |
#### API
| Name | Value | Description |
| ---- | ----- | ----------- |
| 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. |
## Nested Menu Item
### Toggle 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.
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`.
#### Config options
| Name | Value | Requirement | Description |
| ---- | ----- | ----------- | ----------- |
| 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. |
| value | string | optional | A value to associate with the menu item. |
| active | boolean | optional | Initial state value for the toggle menu item |
| disabled | boolean | optional | default: false - Represents the menu item's state. When true, the menu item is unclickable. Toggled by the menu item's API. |
| onSetup | (api) => (api) => void | optional | default: () => () => {} - Function invoked when the menu item is rendered, each time its menu is opened. |
| getSubmenuItems | () => string or MenuItem[] | required | Function invoked when the menu item is clicked to open its submenu. Must return either a space separated string of registered menu names or an array of basic, toggle or nested menu items specifications. |
| onAction | (api) => void | required | Function invoked when the menu item is clicked. |
> Note: Toggle menu items do not have icons.
#### API
| Name | Value | Description |
| ---- | ----- | ----------- |
| 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. |
Write Preview
Loading…
Cancel
Save