---
title: "tinymce.editor.ui.Registry"
description: "TinyMCE 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/6/apis/tinymce.editor.ui.registry/index.md"
version: "6"
last_updated: "2024-04-03T06:12:53Z"
tokens: 3476
---
Important This page documents TinyMCE 6. 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 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. <br>For information on creating an autocompleter, see: [UI Components - Autocompleter](/docs/tinymce/6/autocompleter/). | `Registry` |
| [addButton()](#addButton) | Registers a new toolbar button that executes a command when clicked or activated via keyboard navigation controls. <br>For information on creating a basic toolbar button, see: [UI Components - Types of toolbar buttons: Basic button](/docs/tinymce/6/custom-basic-toolbar-button/). | `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. <br>For information on creating context forms, see: [UI Components - Context forms](/docs/tinymce/6/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. <br>For information on creating context menus, see: [UI Components - Context Menu](/docs/tinymce/6/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. <br>For information on creating context toolbars, see: [UI Components - Context Toolbar](/docs/tinymce/6/contexttoolbar/). | `Registry` |
| [addGroupToolbarButton()](#addGroupToolbarButton) | Registers a new group toolbar button for the toolbar. Renders a toolbar button that opens a floating toolbar when clicked. <br> **Note:** Group toolbar buttons can only be used when using the floating toolbar mode. <br>For information on creating a group toolbar button, see: [UI Components - Types of toolbar buttons: Group toolbar button](/docs/tinymce/6/custom-group-toolbar-button/). | `Registry` |
| [addIcon()](#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()](#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. <br>For information on creating a toolbar menu button, see: [UI Components - Types of toolbar buttons: Menu button](/docs/tinymce/6/custom-menu-toolbar-button/). | `Registry` |
| [addMenuItem()](#addMenuItem) | Registers a new menu item that executes a command when clicked or activated via keyboard navigation controls. <br>For information on creating a basic menu item, see: [UI Components - Custom menu items: Basic menu items](/docs/tinymce/6/creating-custom-menu-items/). | `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. <br>For information on creating a nested menu item, see: [UI Components - Custom menu items: Nested menu items](/docs/tinymce/6/custom-nested-menu-items/). | `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. <br>For information on creating a custom sidebar, see: [UI Components - Custom sidebar](/docs/tinymce/6/customsidebar/). | `Registry` |
| [addSplitButton()](#addSplitButton) | Registers a new split button for the toolbar. The advanced list plugin uses a split button to simplify its functionality. <br>For information on creating a split toolbar button, see: [UI Components - Types of toolbar buttons: Split button](/docs/tinymce/6/custom-split-toolbar-button/). | `Registry` |
| [addToggleButton()](#addToggleButton) | Registers a new toggle button for the toolbar. A toggle buttons state can be set in the configuration. <br>For information on creating a toggle toolbar button, see: [UI Components - Types of toolbar buttons: Toggle button](/docs/tinymce/6/custom-toggle-toolbar-button/). | `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. <br>For information on creating a toggle menu item, see: [UI Components - Custom menu items: Toggle menu items](/docs/tinymce/6/custom-toggle-menu-items/). | `Registry` |
| [addView()](#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. | `Registry` |

## Methods

### addAutocompleter()

```javascript
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](/docs/tinymce/6/autocompleter/).

#### Parameters

- `name (String)` - Unique name identifying this autocomplete configuration.
- `obj (InlineContent.AutocompleterSpec)` - The autocomplete configuration object.

### addButton()

```javascript
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](/docs/tinymce/6/custom-basic-toolbar-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.

### addContextForm()

```javascript
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](/docs/tinymce/6/contextform/).

#### Parameters

- `name (String)` - Unique name identifying the new contextual form item.
- `obj (Toolbar.ContextFormSpec)` - the context form configuration object.

### addContextMenu()

```javascript
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](/docs/tinymce/6/contextmenu/).

#### Parameters

- `name (String)` - Unique name identifying the new context menu.
- `obj (Menu.ContextMenuSpec)` - The context menu configuration object.

### addContextToolbar()

```javascript
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](/docs/tinymce/6/contexttoolbar/).

#### Parameters

- `name (String)` - Unique name identifying the new context toolbar.
- `obj (Toolbar.ContextToolbarSpec)` - The context menu configuration object.

### addGroupToolbarButton()

```javascript
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](/docs/tinymce/6/custom-group-toolbar-button/).

#### Parameters

- `name (String)` - Unique name identifying the new group toolbar button.
- `obj (Toolbar.GroupToolbarButtonSpec)` - The group toolbar button configuration object.

### addIcon()

```javascript
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

```javascript
//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()

```javascript
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](/docs/tinymce/6/custom-menu-toolbar-button/).

#### Parameters

- `name (String)` - Unique name identifying the new menu button.
- `obj (Toolbar.ToolbarMenuButtonSpec)` - The menu button configuration object.

### addMenuItem()

```javascript
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](/docs/tinymce/6/creating-custom-menu-items/).

#### Parameters

- `name (String)` - Unique name identifying the new menu item.
- `obj (Menu.MenuItemSpec)` - The menu item configuration object.

### addNestedMenuItem()

```javascript
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](/docs/tinymce/6/custom-nested-menu-items/).

#### Parameters

- `name (String)` - Unique name identifying the new nested menu item.
- `obj (Menu.NestedMenuItemSpec)` - The nested menu item configuration object.

### addSidebar()

```javascript
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](/docs/tinymce/6/customsidebar/).

#### Parameters

- `name (String)` - Unique name identifying the new sidebar.
- `obj (Sidebar.SidebarSpec)` - The sidebar configuration object.

### addSplitButton()

```javascript
addSplitButton(name: String, obj: Toolbar.ToolbarSplitButtonSpec)
```
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/tinymce/6/custom-split-toolbar-button/).

#### Parameters

- `name (String)` - Unique name identifying the new split button.
- `obj (Toolbar.ToolbarSplitButtonSpec)` - The split button configuration object.

### addToggleButton()

```javascript
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](/docs/tinymce/6/custom-toggle-toolbar-button/).

#### Parameters

- `name (String)` - Unique name identifying the new split button.
- `obj (Toolbar.ToolbarToggleButtonSpec)` - The toggle button configuration object.

### addToggleMenuItem()

```javascript
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](/docs/tinymce/6/custom-toggle-menu-items/).

#### Parameters

- `name (String)` - Unique name identifying the new menu item.
- `obj (Menu.ToggleMenuItemSpec)` - The menu item configuration object.

### addView()

```javascript
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.

#### Parameters

- `name (String)` - Unique name identifying the new view.
- `obj (View.ViewSpec)` - The view configuration object.