The help plugin adds a button and/or menu item that opens a dialog showing two tabs:
- Handy shortcuts that explains some nice-to-know keyboard shortcuts
- Plugin list that shows which plugins that have been installed, with links to the relevant documentation pages if available, and a list of available premium plugins.
In the footer of the dialog you can also see which version of TinyMCE you are using.
The help dialog can also be shown by pressing the keyboard shortcut Alt + 0
.
Basic setup
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'help',
toolbar: 'help'
});
Config Options
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 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.
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
tinymce.init({
selector: 'textarea',
plugins: 'help link table paste 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: function(editor) {
// on editor init, add a tab called custom2
editor.on('init', function() {
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: function() {
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 | Register a tab for the Help dialog |
Example: Using the addTab API
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.
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
configuration option. - The
quickbars_insert_toolbar
configuration option. - Custom Context toolbars.
Menu items
The Help plugin provides the following menu items:
Menu item identifier | Default Menu Location | Description |
---|---|---|
help | Help | Opens the help dialog. |
These menu items can be added to the editor using:
- The
menu
configuration option. - The
contextmenu
configuration option. - Custom Menu toolbar buttons.
Commands
The Help plugin provides the following JavaScript command.
Command | Description |
---|---|
mceHelp | Opens the editor Help dialog. |
Example
tinymce.activeEditor.execCommand('mceHelp');
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
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.