Important changes to Tiny Cloud pricing > Find out more

Basic setup

TinyMCE provides a range of configuration options that allow you to integrate it into your application.

Contribute to this page

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

The four most common configuration options for TinyMCE are:

  1. (Required) The Selector configuration
  2. The Plugin configuration
  3. The Toolbar configuration
  4. The Menu and Menu Bar configuration

A note about code snippet examples

Code snippets are provided as example implementations throughout the TinyMCE documentation.

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 include the selector option, which is described below. Change the value of the working code block according to the HTML.

Insert the snippet into a HTML document between the <script> tags and update the selector as described below.

Selector configuration

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

TinyMCE visually replaces the selected element with an iframe (the editable content area) and the UI elements (such as toolbar, menu bar, and status bar).

The following example replaces all textarea elements on the page with TinyMCE instances:

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

TinyMCE can also match an id attribute.

The following example replaces a textarea element with the id "default" on the page:

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

Providing a TinyMCE editor with the default configuration, such as:

The selector can target most block elements when the editor is used in inline editing mode. Inline 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
});

For information on the differences between the classic and inline editing modes, see: Setup inline editing mode.

Plugin configuration

The functionality of TinyMCE is extended by using plugins, which are enabled using the plugins option.

The following example enables the lists (lists), Advanced Lists (advlist), Link (link), and Image (image) plugins.

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

For a full list of plugins and their options, see: Add plugins to TinyMCE.

Toolbar configuration

TinyMCE provides a default set of toolbar controls, which can be overridden using the toolbar option.

Default toolbar controls

The TinyMCE default toolbar contains the following buttons:

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


The toolbar option defines the presence, order, and grouping of toolbar buttons.

Use a space-separated list to specify the toolbar buttons for TinyMCE. Create toolbar groups by using the “|” pipe character between button names.

Additional information

Menu and Menu bar configuration

There are two menu options: menubar and menu. menubar is used to define the presence and order of menus, such as File, Edit, and View. menu is used to define the presence and order of menu items, such as New Document, Select all, and Source code.

Menu and Menu bar configuration examples

To display the File, Edit, and View menus:

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

To create an Edit menu that only contains the Undo, Redo, and Select all items.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    edit: {title: 'Edit', items: 'undo, redo, selectall'}
  }
});

To create a menu titled “Happy”, provide an identifier for the menu and an object with the title and items for the menu.

For example:

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

Default menu controls

The default menus are as follows:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    file: { title: 'File', items: 'newdocument restoredraft | preview | print ' },
    edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
    view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen' },
    insert: { title: 'Insert', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
    format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align | forecolor backcolor | removeformat' },
    tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },
    table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
    help: { title: 'Help', items: 'help' }
  }
});

Note: Some menu items require a plugin, such as the table menu and items requires the table plugin.

Additional information

Basic configuration example

The following example is a basic TinyMCE configuration.

<!DOCTYPE html>
<html>
<head>
  <script
    type="text/javascript"
    src='https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js'
    referrerpolicy="origin">
  </script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#myTextarea',
    width: 600,
    height: 300,
    plugins: [
      'advlist autolink link image lists charmap print preview hr anchor pagebreak',
      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
      'table emoticons template paste help'
    ],
    toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' +
      'bullist numlist outdent indent | link image | print preview media fullpage | ' +
      'forecolor backcolor emoticons | help',
    menu: {
      favs: {title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons'}
    },
    menubar: 'favs file edit view insert format tools table help',
    content_css: 'css/content.css'
  });
  </script>
</head>

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

Break-down of the basic configuration example

The following section is a break-down of the options used in the basic configuration example.

Selects the textarea with the id myTextarea to be replaced by the editor.

selector: '#myTextarea',

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

width: 600,
height: 300,

Selects the plugins to be included on load.

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

Selects the toolbar buttons displayed 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',

Adds an additional menu named “My Favorites” with menu, then adds it to the menu bar using menubar.

menu: {
  favs: {title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons'}
},
menubar: 'favs file edit view insert format tools table help',

Sets the styling of the editable area using content_css.

content_css: 'css/content.css',

Additional information

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.