tinymce.editor.ui.Registry

TinyMCE UI registration API.

Summary

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.

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.

Registry

addContext()

Registers a new context configuration in the registry. The registry stores all context configurations. The buttons in editor configuration object can contain a context property. These button specifications can use the registered contexts to determine whether to enable or disable the buttons based on the current context.

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.

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.

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.

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.

For information on creating a group toolbar button, see: UI Components - Types of toolbar buttons: Group toolbar button.

Registry

addIcon()

Registers a new SVG icon. The icon name reference can be configured by any TinyMCE UI components that can display an icon. The icon is only available to the editor instance it was configured for.

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.

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.

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.

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.

Registry

addSplitButton()

Registers a new split button for the toolbar. The list styles 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.

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.

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.

Registry

addView()

Registers a new view container. This view container is hidden (off) by default and attached next to the main view. It can be toggled on or off. When it is on, the main editor view is hidden and the specific view is shown. When it is off, the specific view is hidden and the main view is shown. There is also a ToggleView command. The ToggleView command can toggle the view visibility. The ToggleView command can be queried for its current state.

For information on creating a custom view, see: UI Components - Custom view.

Registry

Methods

addAutocompleter()

addAutocompleter(name: String, obj: InlineContent.AutocompleterSpec)

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.


addButton()

addButton(name: String, obj: Toolbar.ToolbarButtonSpec)

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.


addContext()

addContext(name: String, pred: Function)

Registers a new context configuration in the registry. The registry stores all context configurations. The buttons in editor configuration object can contain a context property. These button specifications can use the registered contexts to determine whether to enable or disable the buttons based on the current context.

Parameters

  • name (String) - Unique name identifying the new context configuration.

  • pred (Function) - A predicate function that determines if the context is active


addContextForm()

addContextForm(name: String, obj: Toolbar.ContextFormSpec)

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.


addContextMenu()

addContextMenu(name: String, obj: Menu.ContextMenuSpec)

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.


addContextToolbar()

addContextToolbar(name: String, obj: Toolbar.ContextToolbarSpec)

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.


addGroupToolbarButton()

addGroupToolbarButton(name: String, obj: Toolbar.GroupToolbarButtonSpec)

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.

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.


addIcon()

addIcon(name: String, svgData: String)

Registers a new SVG icon. The icon name reference can be configured by any TinyMCE 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.

  • svgData (String) - The SVG data string the browser will use to render the SVG icon.


addMenuButton()

addMenuButton(name: String, obj: Toolbar.ToolbarMenuButtonSpec)

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.


addMenuItem()

addMenuItem(name: String, obj: Menu.MenuItemSpec)

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.


addNestedMenuItem()

addNestedMenuItem(name: String, obj: Menu.NestedMenuItemSpec)

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.


addSidebar()

addSidebar(name: String, obj: Sidebar.SidebarSpec)

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.


addSplitButton()

addSplitButton(name: String, obj: Toolbar.ToolbarSplitButtonSpec)

Registers a new split button for the toolbar. The list styles 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.


addToggleButton()

addToggleButton(name: String, obj: Toolbar.ToolbarToggleButtonSpec)

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.


addToggleMenuItem()

addToggleMenuItem(name: String, obj: Menu.ToggleMenuItemSpec)

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.


addView()

addView(name: String, obj: View.ViewSpec)

Registers a new view container. This view container is hidden (off) by default and attached next to the main view. It can be toggled on or off. When it is on, the main editor view is hidden and the specific view is shown. When it is off, the specific view is hidden and the main view is shown. There is also a ToggleView command. The ToggleView command can toggle the view visibility. The ToggleView command can be queried for its current state.

For information on creating a custom view, see: UI Components - Custom view.

Parameters

  • name (String) - Unique name identifying the new view.

  • obj (View.ViewSpec) - The view configuration object.