Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

tinymce.editor.ui.Registry

TinyMCE 5 Ui registration API.

Methods

name summary defined by
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.
tinymce.editor.ui.Registry
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.
tinymce.editor.ui.Registry
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.
tinymce.editor.ui.Registry
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.
tinymce.editor.ui.Registry
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.
tinymce.editor.ui.Registry
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.
tinymce.editor.ui.Registry
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. tinymce.editor.ui.Registry
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.
tinymce.editor.ui.Registry
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.
tinymce.editor.ui.Registry
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.
tinymce.editor.ui.Registry
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.
tinymce.editor.ui.Registry
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.
tinymce.editor.ui.Registry
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.
tinymce.editor.ui.Registry
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.
tinymce.editor.ui.Registry

Methods

addAutocompleter

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.

Parameters
  • name (String) - Unique name identifying this autocomplete configuration.
  • obj (InlineContent.AutocompleterSpec) - The autocomplete configuration object.
Return value
  • void - void

addButton

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.

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

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.

Parameters
  • name (String) - Unique name identifying the new contextual form item.
  • obj (Toolbar.ContextFormSpec) - the context form configuration object.
Return value
  • void - void

addContextMenu

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.

Parameters
  • name (String) - Unique name identifying the new context menu.
  • obj (Menu.ContextMenuSpec) - The context menu configuration object.
Return value
  • void - void

addContextToolbar

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.

Parameters
  • name (String) - Unique name identifying the new context toolbar.
  • obj (Toolbar.ContextToolbarSpec) - The context menu configuration object.
Return value
  • void - void

addGroupToolbarButton

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.

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

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
//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>' );
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

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.

Parameters
  • name (String) - Unique name identifying the new menu button.
  • obj (Toolbar.ToolbarMenuButtonSpec) - The menu button configuration object.
Return value
  • void - void

addMenuItem

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.

Parameters
  • name (String) - Unique name identifying the new menu item.
  • obj (Menu.MenuItemSpec) - The menu item configuration object.
Return value
  • void - void

addNestedMenuItem

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.

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

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.

Parameters
  • name (String) - Unique name identifying the new sidebar.
  • obj (Sidebar.SidebarSpec) - The sidebar configuration object.
Return value
  • void - void

addSplitButton

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.

Parameters
  • name (String) - Unique name identifying the new split button.
  • obj (Toolbar.ToolbarSplitButtonSpec) - The split button configuration object.
Return value
  • void - void

addToggleButton

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.

Parameters
  • name (String) - Unique name identifying the new split button.
  • obj (Toolbar.ToolbarToggleButtonSpec) - The toggle button configuration object.
Return value
  • void - void

addToggleMenuItem

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.

Parameters
  • name (String) - Unique name identifying the new menu item.
  • obj (Menu.ToggleMenuItemSpec) - The menu item configuration object.
Return value
  • void - void

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.