Basic setup

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
  plugins: '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 an 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:

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="default">Hello, World!</textarea>
tinymce.init({
  selector: 'textarea#default'
});

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), List Styles (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 | styles | 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

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.

To display the File, Edit, and View menus:

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

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="menubar">A simple menubar change.</textarea>
tinymce.init({
  selector: 'textarea#menubar',
  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' }
  }
});

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="menu1">A modified <strong>Edit</strong> menu.</textarea>
tinymce.init({
  selector: 'textarea#menu1',
  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
});

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="menu2">A custom <em>Happy</em> menu.</textarea>
tinymce.init({
  selector: 'textarea#menu2',
  plugins: 'code',
  menu: {
    happy: { title: 'Happy', items: 'code' }
  },
  menubar: 'happy'
});

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 | 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' }
  }
});
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/7/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', 'preview', 'anchor', 'pagebreak',
      'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime',
      'media', 'table', 'emoticons', 'help'
    ],
    toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
      'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
      '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', 'preview', 'anchor', 'pagebreak',
  'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime',
  'media', 'table', 'emoticons', 'help'
],

Selects the toolbar buttons displayed to the user. Use a comma or space as a separator.

toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media | 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',

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="basic-conf">
This editor uses the Basic configuration example.
</textarea>
tinymce.init({
  selector: '#basic-conf',
  width: 600,
  height: 300,
  plugins: [
    'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
    'searchreplace', 'wordcount', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media',
    'table', 'emoticons', 'help'
  ],
  toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
    'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
    '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_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

Additional information

  • For a full list of configuration options, review the following pages in the side navigation:

    • Initial configuration - For initial configuration and important settings.

    • Interface - For customizing the look and feel of the editor.

    • Content - For customizing the allowed content and the associated behaviors.

  • For information on Plugins and their options, see: Add plugins to TinyMCE.

  • For information on the CSS required to render some TinyMCE elements outside of the editor, see: Boilerplate content CSS.