Options for customizing the editor’s menus

Basic menu options

This option specifies which menus appear and their order in the menu bar at the top of TinyMCE.

To define the menus on TinyMCE’s menu bar, provide the menubar option with a space-separated list of menus.

Type: String or Boolean

Default value: true

Possible values: true, false, or string of menus

The default value for this option is different for mobile devices. For information on the default mobile option, see: TinyMCE Mobile — Configuration options with mobile defaults.

Example: customizing the menu bar

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menubar: 'file edit insert view format table tools help'
});

Example: disabling/removing the menu bar

To disable the menu bar, set the menubar option to false.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menubar: false
});

For more granular control over the contents of the menus, refer to the menu option documentation.

The menu option allows integrators to define the available menus for the menubar option and specify the menu items that appear within those menus.

To configure the menus, provide a JavaScript object where each property represents a menu. Each menu object should contain title and items properties. The title property is a string that defines the display name, while the items property is a space-separated list of the menu items that should populate the menu.

To group certain menu items, insert a | pipe character between the menu items.

Type: Object

Example: the TinyMCE Default Menu Items

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    file: { title: 'File', items: 'newdocument restoredraft | preview | importword exportpdf exportword | print | deleteallconversations' },
    edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
    view: { title: 'View', items: 'code revisionhistory | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments' },
    insert: { title: 'Insert', items: 'image link media addcomment pageembed codesample inserttable | math | charmap emoticons hr | pagebreak nonbreaking anchor tableofcontents | insertdatetime' },
    format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat' },
    tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | a11ycheck code wordcount' },
    table: { title: 'Table', items: 'inserttable | cell row column | advtablesort | tableprops deletetable' },
    help: { title: 'Help', items: 'help' }
  }
});
The default value for this option is different for mobile devices. For information on the default mobile option, see: TinyMCE Mobile — Configuration options with mobile defaults.
This option alone does not control which menus appear in the menu bar or the order in which they appear. To control the menu bar and the order of the menus in the menu bar, see the menubar option.

removed_menuitems

This option enables the exclusion of items from TinyMCE’s menus. It is especially useful when configuring menus using only the menubar option without defining custom menu items through the menu option.

Type: String

Example: using removed_menuitems

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  removed_menuitems: 'undo redo'
});

Main editor menubar behavior

The following "toolbar" options also affect the behavior of the menubar.

toolbar_location

The toolbar_location option is used to position the toolbar and menubar. The default behavior is to position the toolbar and menu bar above the content area. Setting this option to bottom positions the toolbar and menu bar below the content area. This option works in classic editor (Iframe) mode and inline mode.

Setting this option to auto, positions the toolbar and menu bar either:

  • Above the content area by default.

  • Below the content area if there is not enough space to display the toolbar and menu bar above.

Type: String

Default value: 'auto'

Possible values: 'auto', 'top', 'bottom'

Example: using toolbar_location

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  toolbar_location: 'bottom'
});

toolbar_sticky

A Sticky Toolbar (or Docking Toolbar), docks the toolbar and the menu to the top of the screen when scrolling down a web page until the editor is no longer visible.

To enable Sticky Toolbars, set toolbar_sticky as true in the tinymce.init script. To disable Sticky Toolbars, set toolbar_sticky as false. Sticky toolbars are always enabled in inline mode and cannot be disabled.

To see a demo of sticky toolbar, see the TinyMCE Sticky Toolbar Demo.

Type: Boolean

Default value: false in classic mode, true in inline mode

Possible values: true, false

This feature is only supported when TinyMCE is run in classic mode. It is not supported in inline mode. For more information on the differences between the editing modes, see Classic editing mode.
The default value for this option is different for mobile devices. For information on the default mobile option, see: TinyMCE Mobile — Configuration options with mobile defaults.

Example: using toolbar_sticky

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar_sticky: true
});

toolbar_sticky_offset

This option allows the toolbar to stick or dock at the specified offset from the top or bottom of the viewport depending on the toolbar location (toolbar_location). This can be useful when a site has a sticky header navigation bar, allowing the TinyMCE toolbar to "stick" below the site’s navigation bar. This option accepts a height in pixels.

This option requires the toolbar_sticky option be set to true to take effect.

Type: Number

Default value: 0

Example: using toolbar_sticky_offset

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar_sticky: true,
  toolbar_sticky_offset: 100
});

Persistent inline editor menubar options

The following persistant "toolbar" options also provide a persistant menubar unless the menubar is disabled.

toolbar_persist

This feature is only supported when TinyMCE is run in inline mode. It is not supported in classic mode. For more information on the differences between the editing modes, see Inline editing mode.

This option disables the automatic show and hide behavior of the toolbar and menu bar for inline editors. Enable this option to always show the toolbar and menu bar, and not hide them whenever focus is lost. Use this option to make the toolbar and menu bar persistent for inline editors.

Type: Boolean

Default value: false

Possible values: true, false

Example

tinymce.init({
  selector: 'div',  // change this value according to your HTML
  inline: true,
  toolbar_persist: true
});

fixed_toolbar_container

This feature is only supported when TinyMCE is run in inline mode. It is not supported in classic mode. For more information on the differences between the editing modes, see Inline editing mode.

Use this option to render the inline toolbar into a fixed positioned HTML element. For example, you could fix the toolbar to the top of the browser viewport.

Type: String

Example: using fixed_toolbar_container

This example takes a CSS 3 selector named '#mytoolbar' and renders any inline toolbars into this element.

tinymce.init({
  selector: 'div',  // change this value according to your HTML
  inline: true,
  fixed_toolbar_container: '#mytoolbar'
});

fixed_toolbar_container_target

This feature is only supported when TinyMCE is run in inline mode. It is not supported in classic mode. For more information on the differences between the editing modes, see Inline editing mode.

Use this option to render the inline toolbar into a fixed-positioned HTML element by passing a HTMLElement directly to the option. This option is similar to the fixed_toolbar_container option, which accepts a CSS selector.

fixed_toolbar_container has precedence over fixed_toolbar_container_target, so in order for fixed_toolbar_container_target to work, do not use the fixed_toolbar_container option.

Type: HTMLElement

Example: using fixed_toolbar_container_target

const el = document.createElement('div');
document.body.appendChild(el);

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  inline: true,
  fixed_toolbar_container_target: el
});

Contextual (content-specific) menus

contextmenu

The contextmenu option allows you to specify which items appear on the context menu. The format of this option is a space separated list of items in a string.

The context menu option accepts three styles of item:

  • Any registered menu item.

  • A "|" pipe character to indicate a separator should be added to delineate a group of menu items.

  • Context menu sections defined by a plugin (usually equal to the plugin name). Separators are automatically inserted between context menu sections.

If the same name is registered as both a context menu section and a menu item, the context menu section takes preference.

The default configuration includes the context menu sections for the following plugins: link, linkchecker , image, editimage, permanentpen, table, and tinymcespellchecker.

To disable the editor’s context menu, set this option to false.

Type: String or false

Default value: 'link linkchecker image editimage table spellchecker configurepermanentpen'

When the TinyMCE context menu is enabled, users can still access the browser context menu, including the browser spellchecker, using the Ctrl+Right click shortcut. However if the contextmenu_never_use_native option is enabled, holding the Ctrl key will have no effect.
When a TinyMCE context menu is configured, a user on a mobile device can access the TinyMCE context menu by a long press. However, when a TinyMCE context menu is not configured but a TinyMCE context toolbar is, long press will instead open the context toolbar.
The native context menu on a mobile device can still be accessed with a TinyMCE context menu configured, either by a single tap on iOS, or by a double tap on Android. However if the contextmenu_never_use_native option is enabled, neither single nor double tap will have any effect.

Example: using contextmenu

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'link image table',
  contextmenu: 'link image table'
});

For information on configuring the contextmenu option and creating custom context menu items context menu examples.

contextmenu_avoid_overlap

The contextmenu_avoid_overlap option prevents the context menu from covering (or overlapping) specific nodes within the editor. This option accepts a CSS selector. When the context menu is opened on a node that matches the specified selector, the context menu will render below the node, instead of where the click occurred. If there is not enough room in the browser window below the node, the context menu will be shown above the node.

Type: String

Default value: ''

Example

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  contextmenu_avoid_overlap: '.mce-spelling-word'
});

contextmenu_never_use_native

The contextmenu_never_use_native option allows you to prevent the browser context menu from appearing within the editor.

Using this option may result in unexpected behavior when right-clicking in text areas. We advise you to consider all your options carefully before using this feature.

Type: Boolean

Default value: false

Example: using contextmenu_never_use_native

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  contextmenu_never_use_native: true
});