---
title: "Help plugin"
description: "Shows the help dialog."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/help/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/help/index.md"
version: "6"
last_updated: "2023-09-12T11:38:52Z"
tokens: 1618
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/help/).
# Help plugin

The help plugin adds a button and/or menu item that opens a dialog showing four tabs:

| Tab display name | Tab configuration name | Purpose |
| --- | --- | --- |
| Handy shortcuts | `shortcuts` | Presents keyboard shortcuts available in the TinyMCE editor. |
| Keyboard Navigation | `keyboardnav` | Documents the keyboard-based options for navigating and controlling the entire TinyMCE editor. |
| Plugins | `plugins` | Lists the installed plugins for the TinyMCE instance, with links to the relevant TinyMCE documentation.

Also presents a list of available TinyMCE Premium plugins. |
| Version | `versions` | Displays the TinyMCE version. |
The TinyMCE Help dialog can also be shown by pressing a keyboard shortcut.

| Action | Windows or Linux | macOS |
| --- | --- | --- |
| Open the TinyMCE Help dialog | Alt+0 | ⌥+0 |
As of TinyMCE 6.7, the keyboard shortcut that opens the TinyMCE Help dialog displays, by default, in the TinyMCE status bar.

## Basic setup

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'help',
  toolbar: 'help'
});
```

## Options

### `help_accessibility`

> **Note:** This feature is only available for TinyMCE 6.7 and later.
When the [Help](#) plugin is loaded, the TinyMCE editor displays the keyboard shortcut for accessing the Help dialog in the TinyMCE status bar by default.

The `help_accessibility` option allows for this display to be turned off.

**Type:** `Boolean`

**Possible values:** `true`, `false`

**Default value:** `true`

#### Example: turning `help_accessibility` off

```js
tinymce.init({
  selector: "textarea",  // change this value according to your html
  plugins: "help",
  help_accessibility: false,
});
```

#### Example: explicitly turning `help_accessibility` on

The `help_accessibility` option is set to true by default when the **Help** plugin is loaded.

It is not necessary, but may be useful, to explicitly set the option to `true`.

```js
tinymce.init({
  selector: "textarea",  // change this value according to your html
  plugins: "help",
  help_accessibility: true,
});
```

### `help_tabs`

This option allows you to specify which tabs the Help dialog should show, and in what order. The default TinyMCE tabs are called `shortcuts`, `keyboardnav`, `plugins` and `versions`. These tabs can be overwritten by providing a new [tab panel](../dialog-components/#tabpanel) specification with the same `name`, and new tabs can be added by registering a tab panel with a new `name`. New tabs can be registered in the `help_tabs` configuration or at initialization or runtime using the [`addTab` API method](#tabapi).

If `help_tabs` is configured, only tabs named in `help_tabs` will be displayed. Any tabs defined using `addTab` that are not named in `help_tabs` will be ignored.

If `help_tabs` is not configured, any tabs defined using `addTab` will be displayed after the default tabs.

**Type:** `Array`

**Default value:** `[ 'shortcuts', 'keyboardnav', 'plugins', 'versions' ]`

#### Example: using `help_tabs`

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'help link table code emoticons',
  toolbar: 'help addTab',
  help_tabs: [
    'shortcuts', // the default shortcuts tab
    'keyboardnav', // the default keyboard navigation tab
    'plugins', // the default plugins tab
    {
      name: 'custom1', // new tab called custom1
      title: 'Custom Tab 1',
      items: [
        {
          type: 'htmlpanel',
          html: '<p>This is a custom tab</p>',
        }
      ]
    },
    {
      name: 'versions', // override the default versions tab
      title: 'Custom Versions',
      items: [
        {
          type: 'htmlpanel',
          html: 'This is a custom versions panel.'
        }
      ]
    },
    'custom2', // new tab custom2 as defined on init in setup() below
    'custom3' // new tab custom3 as defined on button click in setup() below
  ],
  setup: (editor) => {
    // on editor init, add a tab called custom2
    editor.on('init', () => {
      editor.plugins.help.addTab({
        name: 'custom2',
        title: 'Custom Tab 2',
        items: [
          {
            type: 'htmlpanel',
            html: '<p>This is another custom tab</p>',
          }
        ]}
      );
    });

    // add a toolbar button that when clicked adds a tab called custom3
    editor.ui.registry.addButton('addTab', {
      text: 'Add tab',
      onAction: () => {
        editor.plugins.help.addTab({
          name: 'custom3',
          title: 'Custom Tab 3',
          items: [
            {
              type: 'htmlpanel',
              html: '<p>This is yet another custom tab</p>',
            }
          ]
        });
      }
    });
  }
});
```

## API

| Name | Arguments | Description |
| --- | --- | --- |
| addTab | tabSpec: [TabPanel](../dialog-components/#tabpanel) | Register a tab for the Help dialog |

### Example: using the `addTab` API

```js
tinymce.activeEditor.plugins.help.addTab({
  name: 'custom',
  title: 'My Custom Tab',
  items: [
    {
      type: 'htmlpanel',
      html: '<p>This is a custom tab</p>',
    }
  ]
});
```

## Exposing metadata for the help plugin

For information on how to expose metadata from you custom plugin to add it to the Installed plugins list in the Help plugin, see the [Creating a Plugin page](../creating-a-plugin/).

## Toolbar buttons

The Help plugin provides the following toolbar buttons:

| Toolbar button identifier | Description |
| --- | --- |
| `help` | Opens the help dialog. |
These toolbar buttons can be added to the editor using:

- The [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The Help plugin provides the following menu items:

| Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | Description |
| --- | --- | --- |
| `help` | Help | Opens the help dialog. |
These menu items can be added to the editor using:

- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).

## Commands

The Help plugin provides the following TinyMCE command.

| Command | Description |
| --- | --- |
| mceHelp | Opens the editor Help dialog. |
Example
```js
tinymce.activeEditor.execCommand('mceHelp');
```