tinymce.editor.ui.Registry
TinyMCE 5 Ui registration API.
Summary
Methods
| Name | Summary | Defined by | 
|---|---|---|
| Registers a new auto completer component. When a configured string pattern is matched in the content while typing, the autocompleter will be triggered. Emoticons and Charmap use an autocompleter. For information on creating an autocompleter, see: UI Components - Autocompleter. | ||
| Registers a new toolbar button that executes a command when clicked or activated via keyboard navigation controls. For information on creating a basic toolbar button, see: UI Components - Types of toolbar buttons: Basic button. | ||
| Registers a new contextual form item. Similar to a context menu item, a contextual form is an item with an input form element appearing when a content predicate is matched. An example of a contextual form is the link plugin when the configuration { link_context_toolbar: true } is used. When the cursor is on a link, a contextual input form appears allowing for quick changes to the url field. For information on creating context forms, see: UI Components - Context forms. | ||
| Registers a new context menu section that only appears when a content predicate is matched, for example, the cursor is inside a table. For information on creating context menus, see: UI Components - Context Menu. | ||
| Registers a new context toolbar that only appears when a content predicate is matched for example the cursor is on an image element. For information on creating context toolbars, see: UI Components - Context Toolbar. | ||
| Registers a new group toolbar button for the toolbar. Renders a toolbar button that opens a floating toolbar when clicked. Note: Group toolbar buttons can only be used when using the floating toolbar mode. Added in TinyMCE 5.2 For information on creating a group toolbar button, see: UI Components - Types of toolbar buttons: Group toolbar button. | ||
| Registers a new SVG icon, the icon name reference can be configured by any TinyMCE 5 Ui components that can display an icon. The icon is only available to the editor instance it was configured for. | ||
| Registers a new menu button. Adds a toolbar button that opens a menu when clicked. The menu can be populated by items created by addMenuItem, addNestedMenuItem or addToggleMenuItem. For information on creating a toolbar menu button, see: UI Components - Types of toolbar buttons: Menu button. | ||
| Registers a new menu item that executes a command when clicked or activated via keyboard navigation controls. For information on creating a basic menu item, see: UI Components - Custom menu items: Basic menu items. | ||
| Registers a new menu item that reveals a submenu when clicked or activated by keyboard navigation controls.The submenu can be populated by items created by addMenuItem, addNestedMenuItem or addToggleMenuItem. For information on creating a nested menu item, see: UI Components - Custom menu items: Nested menu items. | ||
| Registers a new sidebar container. This sidebar container is attached to the right side of the editor and can be toggled open or closed. When registered, a new toolbar toggle button with the same sidebar name is created. Additionally there is a ToggleSidebar command and a 'ToggleSidebar' event that can used to manage the sidebar open/closed state. The tinycomments plugin uses a sidebar for its Ui components. For information on creating a custom sidebar, see: UI Components - Custom sidebar. | ||
| Registers a new split button for the toolbar. The advanced list plugin uses a split button to simplify its functionality. For information on creating a split toolbar button, see: UI Components - Types of toolbar buttons: Split button. | ||
| Registers a new toggle button for the toolbar. A toggle buttons state can be set in the configuration. For information on creating a toggle toolbar button, see: UI Components - Types of toolbar buttons: Toggle button. | ||
| Registers a new menu item that will act like a toggle button, showing a tick in the menu item to represent state. For information on creating a toggle menu item, see: UI Components - Custom menu items: Toggle menu items. | 
Methods
addAutocompleter()
addAutocompleter(name: String, obj: InlineContent.AutocompleterSpec): voidRegisters a new auto completer component. When a configured string pattern is matched in the content while typing, the autocompleter will be triggered. Emoticons and Charmap use an autocompleter.
For information on creating an autocompleter, see: UI Components - Autocompleter.
addButton()
addButton(name: String, obj: Toolbar.ToolbarButtonSpec): voidRegisters a new toolbar button that executes a command when clicked or activated via keyboard navigation controls.
For information on creating a basic toolbar button, see: UI Components - Types of toolbar buttons: Basic button.
addContextForm()
addContextForm(name: String, obj: Toolbar.ContextFormSpec): voidRegisters a new contextual form item. Similar to a context menu item, a contextual form is an item with an input form element appearing when a content predicate is matched. An example of a contextual form is the link plugin when the configuration { link_context_toolbar: true } is used. When the cursor is on a link, a contextual input form appears allowing for quick changes to the url field.
For information on creating context forms, see: UI Components - Context forms.
addContextMenu()
addContextMenu(name: String, obj: Menu.ContextMenuSpec): voidRegisters a new context menu section that only appears when a content predicate is matched, for example, the cursor is inside a table.
For information on creating context menus, see: UI Components - Context Menu.
addContextToolbar()
addContextToolbar(name: String, obj: Toolbar.ContextToolbarSpec): voidRegisters a new context toolbar that only appears when a content predicate is matched for example the cursor is on an image element.
For information on creating context toolbars, see: UI Components - Context Toolbar.
addGroupToolbarButton()
addGroupToolbarButton(name: String, obj: Toolbar.GroupToolbarButtonSpec): voidRegisters a new group toolbar button for the toolbar. Renders a toolbar button that opens a floating toolbar when clicked.
Note: Group toolbar buttons can only be used when using the floating toolbar mode.
Added in TinyMCE 5.2
For information on creating a group toolbar button, see: UI Components - Types of toolbar buttons: Group toolbar button.
addIcon()
addIcon(name: String, string: svgData): voidRegisters a new SVG icon, the icon name reference can be configured by any TinyMCE 5 Ui components that can display an icon. The icon is only available to the editor instance it was configured for.
Examples
//To add a simple triangle icon:
editor.ui.registry.addIcon('triangleUp', '<svg height="24" width="24"><path d="M12 0 L24 24 L0 24 Z" /></svg>' );addMenuButton()
addMenuButton(name: String, obj: Toolbar.ToolbarMenuButtonSpec): voidRegisters a new menu button. Adds a toolbar button that opens a menu when clicked. The menu can be populated by items created by addMenuItem, addNestedMenuItem or addToggleMenuItem.
For information on creating a toolbar menu button, see: UI Components - Types of toolbar buttons: Menu button.
addMenuItem()
addMenuItem(name: String, obj: Menu.MenuItemSpec): voidRegisters a new menu item that executes a command when clicked or activated via keyboard navigation controls.
For information on creating a basic menu item, see: UI Components - Custom menu items: Basic menu items.
addNestedMenuItem()
addNestedMenuItem(name: String, obj: Menu.NestedMenuItemSpec): voidRegisters a new menu item that reveals a submenu when clicked or activated by keyboard navigation controls.The submenu can be populated by items created by addMenuItem, addNestedMenuItem or addToggleMenuItem.
For information on creating a nested menu item, see: UI Components - Custom menu items: Nested menu items.
addSidebar()
addSidebar(name: String, obj: Sidebar.SidebarSpec): voidRegisters a new sidebar container. This sidebar container is attached to the right side of the editor and can be toggled open or closed. When registered, a new toolbar toggle button with the same sidebar name is created. Additionally there is a ToggleSidebar command and a 'ToggleSidebar' event that can used to manage the sidebar open/closed state. The tinycomments plugin uses a sidebar for its Ui components.
For information on creating a custom sidebar, see: UI Components - Custom sidebar.
addSplitButton()
addSplitButton(name: String, obj: Toolbar.ToolbarSplitButtonSpec): voidRegisters a new split button for the toolbar. The advanced list plugin uses a split button to simplify its functionality.
For information on creating a split toolbar button, see: UI Components - Types of toolbar buttons: Split button.
addToggleButton()
addToggleButton(name: String, obj: Toolbar.ToolbarToggleButtonSpec): voidRegisters a new toggle button for the toolbar. A toggle buttons state can be set in the configuration.
For information on creating a toggle toolbar button, see: UI Components - Types of toolbar buttons: Toggle button.
addToggleMenuItem()
addToggleMenuItem(name: String, obj: Menu.ToggleMenuItemSpec): voidRegisters a new menu item that will act like a toggle button, showing a tick in the menu item to represent state.
For information on creating a toggle menu item, see: UI Components - Custom menu items: Toggle menu items.