--- title: "tinymce.editor.ui.Registry" description: "TinyMCE 5 Ui registration API." canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor.ui.registry/" md_url: "https://www.tiny.cloud/docs/tinymce/5/apis/tinymce.editor.ui.registry/index.md" version: "5" last_updated: "2024-03-26T08:09:19Z" tokens: 3387 --- Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../../latest/apis/tinymce.editor.ui.registry/). # tinymce.editor.ui.Registry TinyMCE 5 Ui registration API. ## Summary ### Methods | Name | Summary | Defined by | | --- | --- | --- | | [addAutocompleter()](#addAutocompleter) | 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](/docs/ui-components/autocompleter/). | `Registry` | | [addButton()](#addButton) | 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](/docs/ui-components/typesoftoolbarbuttons/#basicbutton). | `Registry` | | [addContextForm()](#addContextForm) | 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](/docs/ui-components/contextform/). | `Registry` | | [addContextMenu()](#addContextMenu) | 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](/docs/ui-components/contextmenu/). | `Registry` | | [addContextToolbar()](#addContextToolbar) | 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](/docs/ui-components/contexttoolbar/). | `Registry` | | [addGroupToolbarButton()](#addGroupToolbarButton) | 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](/docs/ui-components/typesoftoolbarbuttons/#grouptoolbarbutton). | `Registry` | | [addIcon()](#addIcon) | 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. | `Registry` | | [addMenuButton()](#addMenuButton) | 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](/docs/ui-components/typesoftoolbarbuttons/#menubutton). | `Registry` | | [addMenuItem()](#addMenuItem) | 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](/docs/ui-components/menuitems/#basicmenuitems). | `Registry` | | [addNestedMenuItem()](#addNestedMenuItem) | 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](/docs/ui-components/menuitems/#nestedmenuitems). | `Registry` | | [addSidebar()](#addSidebar) | 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](/docs/ui-components/customsidebar/). | `Registry` | | [addSplitButton()](#addSplitButton) | 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](/docs/ui-components/typesoftoolbarbuttons/#splitbutton). | `Registry` | | [addToggleButton()](#addToggleButton) | 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](/docs/ui-components/typesoftoolbarbuttons/#togglebutton). | `Registry` | | [addToggleMenuItem()](#addToggleMenuItem) | 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](/docs/ui-components/menuitems/#togglemenuitems). | `Registry` | ## Methods ### addAutocompleter() ```javascript addAutocompleter(name: String, obj: InlineContent.AutocompleterSpec): void ``` 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](/docs/ui-components/autocompleter/). #### Parameters - `name (String)` - Unique name identifying this autocomplete configuration. - `obj (InlineContent.AutocompleterSpec)` - The autocomplete configuration object. #### Return value - `void` - void ### addButton() ```javascript addButton(name: String, obj: Toolbar.ToolbarButtonSpec): void ``` 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](/docs/ui-components/typesoftoolbarbuttons/#basicbutton). #### Parameters - `name (String)` - Unique name identifying the button, this button name will be used in the toolbar configuration to reference the button. - `obj (Toolbar.ToolbarButtonSpec)` - the button configuration object. #### Return value - `void` - void ### addContextForm() ```javascript addContextForm(name: String, obj: Toolbar.ContextFormSpec): void ``` 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](/docs/ui-components/contextform/). #### Parameters - `name (String)` - Unique name identifying the new contextual form item. - `obj (Toolbar.ContextFormSpec)` - the context form configuration object. #### Return value - `void` - void ### addContextMenu() ```javascript addContextMenu(name: String, obj: Menu.ContextMenuSpec): void ``` 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](/docs/ui-components/contextmenu/). #### Parameters - `name (String)` - Unique name identifying the new context menu. - `obj (Menu.ContextMenuSpec)` - The context menu configuration object. #### Return value - `void` - void ### addContextToolbar() ```javascript addContextToolbar(name: String, obj: Toolbar.ContextToolbarSpec): void ``` 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](/docs/ui-components/contexttoolbar/). #### Parameters - `name (String)` - Unique name identifying the new context toolbar. - `obj (Toolbar.ContextToolbarSpec)` - The context menu configuration object. #### Return value - `void` - void ### addGroupToolbarButton() ```javascript addGroupToolbarButton(name: String, obj: Toolbar.GroupToolbarButtonSpec): void ``` 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](/docs/ui-components/typesoftoolbarbuttons/#grouptoolbarbutton). #### Parameters - `name (String)` - Unique name identifying the new group toolbar button. - `obj (Toolbar.GroupToolbarButtonSpec)` - The group toolbar button configuration object. #### Return value - `void` - void ### addIcon() ```javascript addIcon(name: String, string: svgData): void ``` 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. #### Examples ```javascript //To add a simple triangle icon: editor.ui.registry.addIcon('triangleUp', '' ); ``` #### Parameters - `name (String)` - Unique name identifying the new icon. - `string (svgData)` - The SVG data string the browser will use to render the SVG icon. #### Return value - `void` - void ### addMenuButton() ```javascript addMenuButton(name: String, obj: Toolbar.ToolbarMenuButtonSpec): void ``` 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](/docs/ui-components/typesoftoolbarbuttons/#menubutton). #### Parameters - `name (String)` - Unique name identifying the new menu button. - `obj (Toolbar.ToolbarMenuButtonSpec)` - The menu button configuration object. #### Return value - `void` - void ### addMenuItem() ```javascript addMenuItem(name: String, obj: Menu.MenuItemSpec): void ``` 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](/docs/ui-components/menuitems/#basicmenuitems). #### Parameters - `name (String)` - Unique name identifying the new menu item. - `obj (Menu.MenuItemSpec)` - The menu item configuration object. #### Return value - `void` - void ### addNestedMenuItem() ```javascript addNestedMenuItem(name: String, obj: Menu.NestedMenuItemSpec): void ``` 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](/docs/ui-components/menuitems/#nestedmenuitems). #### Parameters - `name (String)` - Unique name identifying the new nested menu item. - `obj (Menu.NestedMenuItemSpec)` - The nested menu item configuration object. #### Return value - `void` - void ### addSidebar() ```javascript addSidebar(name: String, obj: Sidebar.SidebarSpec): void ``` 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](/docs/ui-components/customsidebar/). #### Parameters - `name (String)` - Unique name identifying the new sidebar. - `obj (Sidebar.SidebarSpec)` - The sidebar configuration object. #### Return value - `void` - void ### addSplitButton() ```javascript addSplitButton(name: String, obj: Toolbar.ToolbarSplitButtonSpec): void ``` 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](/docs/ui-components/typesoftoolbarbuttons/#splitbutton). #### Parameters - `name (String)` - Unique name identifying the new split button. - `obj (Toolbar.ToolbarSplitButtonSpec)` - The split button configuration object. #### Return value - `void` - void ### addToggleButton() ```javascript addToggleButton(name: String, obj: Toolbar.ToolbarToggleButtonSpec): void ``` 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](/docs/ui-components/typesoftoolbarbuttons/#togglebutton). #### Parameters - `name (String)` - Unique name identifying the new split button. - `obj (Toolbar.ToolbarToggleButtonSpec)` - The toggle button configuration object. #### Return value - `void` - void ### addToggleMenuItem() ```javascript addToggleMenuItem(name: String, obj: Menu.ToggleMenuItemSpec): void ``` 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](/docs/ui-components/menuitems/#togglemenuitems). #### Parameters - `name (String)` - Unique name identifying the new menu item. - `obj (Menu.ToggleMenuItemSpec)` - The menu item configuration object. #### Return value - `void` - void