Options for customizing the editor’s menus

Basic menu options

This option allows you to specify which menus should appear and the order that they appear in the menu bar at the top of TinyMCE.

To specify the menus that should appear on TinyMCE’s menu bar, the menubar option should be provided 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, the menubar option should be provided a boolean value of false.

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

If you need more control over the contents of the menus, see the menu parameter.

This option allows you to specify which menus should appear on TinyMCE’s menu bar and the items that should appear within the menus themselves.

To specify the menus that should appear on TinyMCE’s menu bar, the menu option should be provided with a JavaScript object containing a property for each menu. These properties should contain a JavaScript object themselves with properties title and items.

The title property should contain a string with the name of the menu. The items field should contain a space separated list of the controls that should populate the menu.

If you would like to group these menu items, please 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 | export print | deleteallconversations' },
    edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
    view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments' },
    insert: { title: 'Insert', items: 'image link media addcomment pageembed template codesample inserttable | 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.

If all you need is to control which menus are available and/or in what order, see the menubar parameter.

removed_menuitems

This option allows you to remove items from TinyMCE’s drop down menus. This is useful if you are using the menubar option to set your menus rather than the more specific 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.

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

Type: Boolean

Default value: false

Possible values: true, false

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 option is only supported when using an inline editor. 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 option is only supported when using an inline editor. 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 option is only supported when using an inline editor. 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.

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
});