Question

This introduction to TinyMCE configuration section details important options used in traditional form-based layouts, useful information for creating streamlined user experiences and examples of using TinyMCE as an inline editor.

There are three configuration options that require careful consideration once the TinyMCE script has been added to your page:

1. Selector configuration
2. Plugin configuration
3. Toolbar & menu configuration

A note about code snippet examples

Code snippets are provided as example implementations for each topic in this reference section.

Example code snippet:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugin: 'a_tinymce_plugin',
  a_plugin_option: true,
  a_configuration_option: 400
});

Snippets regularly include a selector with the value 'textarea'. Adapt the value of the working code block according to the HTML.

Insert the snippet into your HTML document and replace everything between the <script> tags containing the tinymce object (tinymce.init({})). Visual changes such as adding a toolbar button or menu item change the editor immediately.

Selector configuration

Selector configuration is an important configuration option for TinyMCE integration. Selector configuration uses CSS selector syntax to determine which elements on the page are editable through TinyMCE.

Important: This is where TinyMCE editable areas are specified.

TinyMCE replaces the selected element with an iframe and performs its operations within that iframe while in regular editing mode.

The following example replaces all textarea elements on the page:

tinymce.init({
  selector: 'textarea'
});

TinyMCE can also match an id attribute.

The following example replaces a textarea element with id 'editable' on the page:

tinymce.init({
  selector: 'textarea#editable'
});

This selector can be used on any block element while using this option in TinyMCE’s inline editing mode. Inline editing mode edits the content in place instead of replacing the element with an iframe.

The following example uses the selector in inline editing mode on a div element with id 'editable':

tinymce.init({
  selector: 'div#editable',
  inline: true
});

Note: For more information on the differences between regular and inline editing modes, see the Setup inline editing mode page.

Plugin configuration

The plugins configuration option enables the plugins functionality within the editor. TinyMCE plugins provide useful features to extend and enhance the TinyMCE experience.

Important: Now is the time to consider which plugins to include in TinyMCE

Enabling plugin functionality is simple. Simply add the plugins key to tinymce.init() and provide a comma, space-separated string, or an array of strings as values.

The following example enables plugins.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins : 'advlist autolink link image lists charmap print preview'
});

Documentation about configuring plugins are in the relevant sections of the documentation. The full list of plugins, their options, and control associations is available here.

Toolbar & menu configuration

TinyMCE provides a default set of toolbar controls, such as bold, italic, and text alignment buttons. TinyMCE provides an easy way to change this toolbar configuration to suit individual deployment scenarios.

Default toolbar controls

The TinyMCE default toolbar contains the following buttons:

newdocument	bold	italic	underline	strikethrough
alignleft	aligncenter	alignright	alignjustify	styleselect
formatselect	fontselect	fontsizeselect	cut	copy
paste	bullist	numlist	outdent	indent
blockquote	undo	redo	removeformat	subscript
superscript

Default TinyMCE toolbar & menubar state

The toolbar option displays, orders, and groups the toolbar buttons.

Use a space-separated list to specify the buttons that appear in TinyMCE’s toolbar. Use "|" pipe characters between the groups of buttons to create groups within this list.

Example

tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  toolbar: 'undo redo | styleselect | bold italic | link image',
});

Set the boolean value to false to disable the toolbar entirely. This example disables the toolbar.

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

The example below specifies multiple toolbars by providing an array of space-separated strings.

Example

tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  toolbar: [
    'undo redo | styleselect | bold italic | link image',
    'alignleft aligncenter alignright'
  ]
});

Note: Adding multiple toolbar options suffixed with a number i.e. “toolbar1”, “toolbar2”, “toolbar3” is allowed.

A quick look at the menu and menubar controls

Just as there is a toolbar option, there is also a menu option. There are two menu related options: menu and menubar. Let’s take a quick look at the default menu items. Some of these settings are used in the examples throughout this guide and all of them within the plugins and customization documentation.

Default menu controls

newdocument, undo, redo, visualaid, cut, copy, paste, selectall, bold, italic, underline, strikethrough, subscript, superscript, removeformat, formats

menubar affects items placed on the menu bar itself and menu affects individual items appearing on a menu’s drop-down. menu also provides granular control of the menus. Customized titles can be created for menu items using menu.

The menu bar in the following snippet includes only the menu items File, Edit, and View.

Note: The example above also loads the default items included in each respective menu. For example, Edit loads Undo, Redo, Cut, Copy, Paste, and Select all.

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

The following example creates an Edit menu that includes only Cut, Copy, and Paste items.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    view: {title: 'Edit', items: 'cut, copy, paste'}
  }
});

Create your menu titles by adding a title value. The following example creates a menu titled “Happy”. In the snippet below we create a menu with the title “Happy” and includes the “Source code” item.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    view: {title: 'Happy', items: 'code'}
  },
  plugins: 'code'  // required by the code menu item
});

Setting the value of menubar or toolbar to false removes them. The example below removes both the toolbar and menubar.

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

Important: Each page in the plugin documentation indicates via an icon if that plugin has toolbar buttons or menu items.

Basic configuration example

TinyMCE has many other configuration options available that enable further customization and extension of the editor to match the user’s requirements.

The full list of configuration options is in the Configuration options references section. Plugins, their options, and control associations are available in the Plugins section.

The following example is a walkthrough of a basic TinyMCE configuration.

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src='https://cloud.tinymce.com/5/tinymce.min.js'></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#myTextarea',
    skin: 'dark',
    width: 600,
    height: 300,
    plugins: [
      'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
      'save table contextmenu directionality emoticons template paste textcolor'
    ],
    content_css: 'css/content.css',
    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons'
  });
  </script>
</head>

<body>
  <textarea id="myTextarea"></textarea>
</body>
</html>

Breakdown of the above example

Select only the textarea with the id myTextarea.

selector: '#myTextarea',

Choose a Skin such as the dark skin which is included with TinyMCE.

skin: 'dark',

Set the width and height of the editable area in pixels as numeric values.

width: 600,
height: 300,

Select the plugins that should be included on load.

plugins: [
  'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
  'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
  'save table contextmenu directionality emoticons template paste textcolor'
],

Set the styling of the editable area using content_css. The styling should be a simplified version of the website CSS. Use styles for headers (H1-H6), table layouts, margins, paddings around elements (images, paragraphs), etc.

content_css: 'css/content.css',

The final step is to select the toolbar buttons exposed to the user. Use a comma or space as a separator.

toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons',

Next TinyMCE classic editing mode