User interface options

block_formats

This option defines the formats to be displayed in the formatselect dropdown toolbar button and the blockformats menu item. Each item in the string should be separated by semi-colons and specified using the form title=block.

Type: String

Default Value: 'Paragraph=p; Heading 1=h1; Heading 2=h2; Heading 3=h3; Heading 4=h4; Heading 5=h5; Heading 6=h6; Preformatted=pre'

Example: Using block_formats

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  block_formats: 'Paragraph=p; Header 1=h1; Header 2=h2; Header 3=h3'
});

branding

Use the branding option to disable the "Powered by Tiny" link displayed in the status bar for product attribution.

Product attribution is required for free and open source users. For information on TinyMCE attribution requirements, see: Logo & attribution requirements.

Type: Boolean

Default Value: true

Possible Values: true, false

Example: Using branding

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

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, imagetools, permanentpen, table, and spellchecker.

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

Type: String or false

Default Value: 'link linkchecker image imagetools 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',
  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

This feature is only available for TinyMCE 5.5 and later.

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',
  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',
  contextmenu_never_use_native: true
});

custom_ui_selector

Use the custom_ui_selector option to specify the elements that you want TinyMCE to treat as a part of the editor UI. Specifying elements enables the editor not to lose the selection even if the focus is moved to the elements matching this selector. The editor blur event is not fired if the focus is moved to elements matching this selector since it’s treated as part of the editor UI.

Type: String

Example: Using custom_ui_selector

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  custom_ui_selector: '.my-custom-button'
});
...+++<textarea>++++++</textarea>+++

+++<button class="my-custom-button">+++Button+++</button>+++

draggable_modal

Use the draggable_modal option to enable dragging for modal dialogs.

Type: Boolean

Default Value: false

Possible Values: true, false

Example: Using draggable_modal

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

elementpath

This option allows you to disable the element path within the status bar at the bottom of the editor.

The element path shows the selected element and the parent elements. Clicking an element on the element path will select the element in the editor.

For example: If a paragraph element within a table is selected, the element path will show table > tbody > tr > td > p.

Selecting elements from the element path allows users to perform operations on blocks, such as applying formatting or copying an entire block.

Type: Boolean

Default Value: true

Possible Values: true, false

Example: Using elementpath

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

event_root

This option enables you to specify a CSS selector for an element to be used as the event root when the editor is in inline mode.

By default all events gets bound to the editable area. But in some implementations where the DOM gets modified you want to bind these events to a container and then delegate the events down to the right editor, based on the element ID.

Type: String

Example: Using event_root

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

fixed_toolbar_container

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

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

Example: Using fixed_toolbar_container

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 available for TinyMCE 5.8 and later.

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

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

font_formats

This option defines the fonts to be displayed in the fontselect dropdown toolbar button and the fontformats menu item. Each item in the string should be separated by semi-colons and specified using the form of: title=font-family.

Type: String

Default Value:

`'Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats'`

Example: Using font_formats

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'fontselect',
  font_formats: 'Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace; AkrutiKndPadmini=Akpdmi-n'
});

fontsize_formats

This option allows you to override the font sizes displayed in the fontsizeselect dropdown toolbar button and the fontsizes menu item. Each item in the string should be space or comma-separated and include units.

Type: String

Default Value: '8pt 10pt 12pt 14pt 18pt 24pt 36pt'

Example: Using fontsize_formats

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'fontsizeselect',
  fontsize_formats: '8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt 48pt'
});

height

height sets the height of the entire editor, including the menu bar, toolbars, and status bar.

If a number is provided, TinyMCE sets the height in pixels. If a string is provided, TinyMCE assumes the value is valid CSS and sets the editor’s height as the string value. This allows for alternate units such as %, em, and vh.

Type: Number or String

Example: Using height

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

icons

The icons option allows the editor icons to be extended or replaced using an icon pack. For information on creating icon packs, see: Create an icon pack for TinyMCE.

Type: String

On initialization, TinyMCE will try to load any icon pack specified by the icons option. The icons in the icon pack will be merged with TinyMCE’s default icons and icons in the icon pack will overwrite the default icons with the same identifier.

TinyMCE loads icon packs from the path TINYMCE_BASE/icons/${iconPackName}/icons.js; where:

  • TINYMCE_BASE is the TinyMCE root directory (the directory containing tinymce.min.js).

  • ${iconPackName} is the name of the icon pack.

To use a TinyMCE icon pack:

  1. If required, create a new icons directory in TINYMCE_BASE.

  2. Copy the icon pack into the icons directory.

  3. Add the icons option to tinymce.init

Example: Using icons

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  icons: 'material'  // TINYMCE_BASE/icons/material/icons.js
});

icons_url

The icons_url option allows the editor icons to be extended or replaced using an icon pack. For information on creating icon packs, see: Create an icon pack for TinyMCE.

On initialization, TinyMCE will try to load any icon pack specified by the icons_url option. The icons in the icon pack will be merged with TinyMCE’s default icons and icons in the icon pack will overwrite the default icons with the same identifier.

icons_url is used to specify the location of an icon pack when TinyMCE and the icon pack are loaded from different locations. For example: When loading TinyMCE from Tiny Cloud, the icon pack can be loaded from a different web server.

Type: String

Example: Using icons_url

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  icons_url: 'https://www.example.com/icons/material/icons.js', // load icon pack
  icons: 'material'      // use icon pack
});

inline

This option is not supported on mobile devices.

The inline option allows you to specify whether TinyMCE should run in inline mode.

The inline editing mode is useful when creating user experiences where you want the editing view of the page to be merged with the reading view of the page. When in inline mode, content is edited within the element the editor was initialized on, not within an iframe. Inline editors are designed to be "hidden" until content is selected and to use the CSS styles of the page where it initializes.

Type: Boolean

Default Value: false

Possible Values: true, false

Example: Using inline

tinymce.init({
  selector: '#myeditablediv',  // change this value according to your HTML
  inline: true
});
TinyMCE in inline mode will not initialize on the following elements: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, param, embed, source, wbr, track, colgroup, option, table, tbody, tfoot, thead, tr, th, td, script, noscript, style, textarea, video, audio, iframe, object, and menu.

For more information on the differences between the editing modes, please see this page here.

CSS stylesheets and inline editor content

When using TinyMCE in inline mode, the editor inherits the CSS stylesheet from the page it is embedded in.

If the editor is used in inline mode, care should be taken when using styling that depends on structures within the editor. For example, if there’s a class like this:

h1 strong {
  color: orange;
}

This would make the phrase "bold text" bold and orange in the content:

= This text is *bold text* in a heading

If the user changed the heading to a paragraph or a different heading level, then the text color of the bold text would change for the user. While this is entirely correct behavior according to the stylesheet, it is entirely unexpected from the user’s perspective.

lineheight_formats

This feature is only available for TinyMCE 5.5 and later.

This option allows you to override the line heights displayed in the lineheight dropdown toolbar button and the lineheight menu item. Each item in the string should be space separated.

Type: String

Default Value: '1 1.1 1.2 1.3 1.4 1.5 2'

Example: Using lineheight_formats

tinymce.init({
    selector: 'textarea', // change this value according to your HTML
    toolbar: 'lineheight',
    lineheight_formats: '1 1.1 1.2 1.3 1.4 1.5 2'
});

max_height

The max_height option has two kinds of behaviors depending on the state of the autoresize plugin:

  • autoresize OFF (Default) : Without the autoresize plugin, this option allows you to set the maximum height that a user can stretch the entire TinyMCE interface (by grabbing the dragable area in the bottom right of the editor interface).

  • autoresize ON : With the autoresize plugin, this option sets the maximum height the editor can automatically expand to.

Type: Number

Example: Using max_height

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  max_height: 500
});
If you set the option resize to false the resize handle will be disabled and a user will not be able to resize the editor (by manual dragging). Note that resize defaults to false when the autoresize plugin is enabled.

max_width

This option allows you to set the maximum width that a user can stretch the entire TinyMCE interface (by grabbing the dragable area in the bottom right of the editor interface) when using the modern theme.

This behavior is different than the autoresize plugin, which controls the resizing of the editable area only, not the entire editor.

Type: Number

Example: Using max_width

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  max_width: 500
});
by default the resize handle does not allow horizontal dragging and giving this key a value will not result in an observable behavior.

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 | 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 lineheight | 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' }
  }
});
The default option for this setting is different for mobile devices. For information on the default mobile setting, see: TinyMCE Mobile - Configuration settings with mobile defaults.

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

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 option for this setting is different for mobile devices. For information on the default mobile setting, see: TinyMCE Mobile - Configuration settings 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.

min_height

The min_height option has two kinds of behaviors depending on the state of the autoresize plugin:

  • autoresize OFF (Default) : Without the autoresize plugin, this option allows you to set the minimum height that a user can shrink the entire TinyMCE interface (by grabbing the dragable area in the bottom right of the editor interface).

  • autoresize ON : With the autoresize plugin, this option sets the minimum height the editor can automatically shrink to.

Type: Number

Example: Using min_height

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  min_height: 100
});
If you set the option resize to false the resize handle will be disabled and a user will not be able to resize the editor (by manual dragging). Note that resize defaults to false when the autoresize plugin is enabled.

min_width

This option allows you to set the minimum width that a user can stretch the entire TinyMCE interface (by grabbing the dragable area in the bottom right of the editor interface) when using the modern theme.

This behavior is different from the autoresize plugin, which controls the resizing of the editable area only, not the entire editor.

Type: Number

Example: Using min_width

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  min_width: 400
});
By default the resize handle does not allow horizontal dragging and giving this key a value will not result in an observable behavior.

mobile

This option allows you specify an alternative configuration for mobile devices. This setting allows for overriding settings specifically for mobile devices. For information on customizing TinyMCE for mobile devices, see: TinyMCE mobile.

Type: Object

Example of mobile specific configuration

This example shows how to setup a mobile section to override some of the desktop settings with mobile specific settings.

tinymce.init({
  selector: 'textarea',
  plugins: [ 'code', 'lists' ]
  mobile: {
    menubar: true,
    plugins: [ 'autosave', 'lists', 'autolink' ],
    toolbar: [ 'undo', 'bold', 'italic', 'styleselect' ]
  }
});

placeholder

This feature is only available for TinyMCE 5.2 and later.

This option adds placeholder content that will be shown when the editor is empty.

If the editor is initialized on a textarea element, the placeholder attribute can be used instead.

Type: String

Example: Using placeholder

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

preview_styles

This option lets you configure the preview of styles in format/style listboxes. Enter a string with the styles that you wish to preview separated by a blankspace, or disable the preview of of all styles by setting it to false.

If unset the editor will preview the styles listed in the default value listed below.

Type: Boolean || String

Default Value: font-family font-size font-weight font-style text-decoration text-transform color background-color border border-radius outline text-shadow

Possible Values: String, false

Example: Using preview_styles

No preview of styles:

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

Preview of only font-size and color:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  mode: 'textareas',
  preview_styles: 'font-size color'
});

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

resize

This option gives you the ability to disable the resize handle or set it to resize both horizontal and vertically. The option can be true, false or the string 'both'. False disables the resize, true enables vertical resizing only, 'both' makes it possible to resize in both directions horizontal and vertical.

When resizing is enabled, the editor can be resized by either:

  • Clicking and dragging the resize handle in the bottom right-hand corner of the editor.

  • Focusing the resize handle, and using the arrow keys. The Up Arrow and Left Arrow keys will make the editor smaller, and the Down Arrow and Right Arrow keys will make the editor larger.

Disabling the resize

Type: Boolean

Default Value: true

Possible Values: true, false, 'both'

The default option for this setting is different for mobile devices. For information on the default mobile setting, see: TinyMCE Mobile - Configuration settings with mobile defaults.

Example: Disabling editor resizing

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

Enabling both vertical and horizontal resize

Type: Boolean

Default Value: true

Possible Values: true, false, 'both'

Example: Enabling vertical and horizontal editor resizing

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

skin

This option allows you to specify the skin that TinyMCE should use, or false to not load a skin. The default skin included with TinyMCE is named "oxide".

Type: String or Boolean

Default value: 'oxide'

Possible Values: the name of a skin or false

The name of the skin should match the name of the folder within the skins directory of TinyMCE. If the specified skin is not found, TinyMCE will not load.

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

If you would like to create your own skin, please see the guide here.

skin_url

If you are using TinyMCE skins, this option enables you to specify the location of the skin directory. This is useful if you are loading TinyMCE from one URL, for example a CDN, while loading a skin on, say, a local server.

Type: String

Example: Using skin_url

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  skin_url: '/css/my{prodnamecode}skin'
});

statusbar

This option allows you to specify whether TinyMCE should display the status bar at the bottom of the editor.

The statusbar includes the elementpath, wordcount and editor resize.

To disable the status bar, the statusbar option should be provided with a boolean false value.

Type: Boolean

Default Value: true

Possible Values: true, false

Example: Using statusbar

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

style_formats

This option allows you to define custom items for the styleselect dropdown toolbar button and the formats menu item.

There are four types of items the array can contain:

  • Style: The item must have a title and the necessary fields to specify a new format. An optional name can be provided for the style, which will be prefixed with custom- to ensure that it does not override the default editor formats. If given a unique name, the style can be used with the formatting API. The item will be rendered in the UI as a clickable item that applies the given format.

  • Style reference: The item must have a title and a format which refers to a pre-registered editor format. The item will be rendered in the UI as a clickable item that applies the given format.

  • Nested menu: The item must have a title and an items array that contains other items that will be rendered as a sub-menu.

  • Group heading: The item must only have a title and will be rendered as a non-clickable heading within the menu. This is useful for grouping items without using nested menus.

To merge custom styles with the default styles_format values, set style_formats_merge to true.

Type: Array

Default:

The following is the default value for style_formats where it is using references to existing formats:

style_formats: [
  { title: 'Headings', items: [
    { title: 'Heading 1', format: 'h1' },
    { title: 'Heading 2', format: 'h2' },
    { title: 'Heading 3', format: 'h3' },
    { title: 'Heading 4', format: 'h4' },
    { title: 'Heading 5', format: 'h5' },
    { title: 'Heading 6', format: 'h6' }
  ]},
  { title: 'Inline', items: [
    { title: 'Bold', format: 'bold' },
    { title: 'Italic', format: 'italic' },
    { title: 'Underline', format: 'underline' },
    { title: 'Strikethrough', format: 'strikethrough' },
    { title: 'Superscript', format: 'superscript' },
    { title: 'Subscript', format: 'subscript' },
    { title: 'Code', format: 'code' }
  ]},
  { title: 'Blocks', items: [
    { title: 'Paragraph', format: 'p' },
    { title: 'Blockquote', format: 'blockquote' },
    { title: 'Div', format: 'div' },
    { title: 'Pre', format: 'pre' }
  ]},
  { title: 'Align', items: [
    { title: 'Left', format: 'alignleft' },
    { title: 'Center', format: 'aligncenter' },
    { title: 'Right', format: 'alignright' },
    { title: 'Justify', format: 'alignjustify' }
  ]}
]

Example: Using style_formats

This example shows how to append 3 new style formats.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  style_formats: [
    {title: 'Bold text', inline: 'b'},
    {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
    {name: 'my-inline', title: 'My inline', inline: 'span', classes: [ 'my-inline' ]}
  ],
  // The following option is used to append style formats rather than overwrite the default style formats.
  style_formats_merge: true
});

Interactive examples

This example shows you how to:

  • Override the built-in formats.

  • Add some custom styles to the styleselect dropdown toolbar button and the formats menu item using the style_formats configuration option.

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="format-custom">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128" /></p>

  <h2>Welcome to the TinyMCE editor demo!</h2>
  <p>
    Please try out the features provided in this custom formats example.
  </p>

  <h2>Got questions or need help?</h2>
  <ul>
    <li>Our <a href="https://www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>
  </ul>

  <h2>A simple table to play with</h2>
  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TinyMCE</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
      <tr>
        <td>Plupload</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
    </tbody>
  </table>

  <h2>Found a bug?</h2>
  <p>
    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
  </p>

  <h2>Finally ...</h2>
  <p>
    Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
  </p>
  <p>
    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
  </p>
</textarea>
tinymce.init({
  selector: 'textarea#format-custom',
  height: 500,
  plugins: 'table wordcount',
  content_style: '.left { text-align: left; } ' +
    'img.left { float: left; } ' +
    'table.left { float: left; } ' +
    '.right { text-align: right; } ' +
    'img.right { float: right; } ' +
    'table.right { float: right; } ' +
    '.center { text-align: center; } ' +
    'img.center { display: block; margin: 0 auto; } ' +
    'table.center { display: block; margin: 0 auto; } ' +
    '.full { text-align: justify; } ' +
    'img.full { display: block; margin: 0 auto; } ' +
    'table.full { display: block; margin: 0 auto; } ' +
    '.bold { font-weight: bold; } ' +
    '.italic { font-style: italic; } ' +
    '.underline { text-decoration: underline; } ' +
    '.example1 {} ' +
    'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' +
    '.tablerow1 { background-color: #D3D3D3; }',
  formats: {
    alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', classes: 'left' },
    aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', classes: 'center' },
    alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', classes: 'right' },
    alignfull: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', classes: 'full' },
    bold: { inline: 'span', classes: 'bold' },
    italic: { inline: 'span', classes: 'italic' },
    underline: { inline: 'span', classes: 'underline', exact: true },
    strikethrough: { inline: 'del' },
    customformat: { inline: 'span', styles: { color: '#00ff00', fontSize: '20px' }, attributes: { title: 'My custom format'} , classes: 'example1'}
  },
  style_formats: [
    { title: 'Custom format', format: 'customformat' },
    { title: 'Align left', format: 'alignleft' },
    { title: 'Align center', format: 'aligncenter' },
    { title: 'Align right', format: 'alignright' },
    { title: 'Align full', format: 'alignfull' },
    { title: 'Bold text', inline: 'strong' },
    { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
    { title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
    { title: 'Badge', inline: 'span', styles: { display: 'inline-block', border: '1px solid #2276d2', 'border-radius': '5px', padding: '2px 5px', margin: '0 2px', color: '#2276d2' } },
    { title: 'Table row 1', selector: 'tr', classes: 'tablerow1' },
    { title: 'Image formats' },
    { title: 'Image Left', selector: 'img', styles: { 'float': 'left', 'margin': '0 10px 0 10px' } },
    { title: 'Image Right', selector: 'img', styles: { 'float': 'right', 'margin': '0 0 10px 10px' } },
  ]
});

This example shows you how to edit HTML5 content such as sections and articles.

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="format-html5">
  <section>Section
    <p>Paragraph</p>
  </section>
  <article>Article
    <p>Paragraph</p>
  </article>
  <blockquote>Blockquote
    <p>Paragraph</p>
  </blockquote>
  <aside>Section
    <p>Paragraph</p>
  </aside>
  <figure>Figure
    <figcaption>Figcaption</figcaption>
  </figure>
</textarea>
tinymce.init({
  selector: 'textarea#format-html5',
  height: 500,
  plugins: 'visualblocks',
  style_formats: [
    { title: 'Headers', items: [
      { title: 'h1', block: 'h1' },
      { title: 'h2', block: 'h2' },
      { title: 'h3', block: 'h3' },
      { title: 'h4', block: 'h4' },
      { title: 'h5', block: 'h5' },
      { title: 'h6', block: 'h6' }
    ] },

    { title: 'Blocks', items: [
      { title: 'p', block: 'p' },
      { title: 'div', block: 'div' },
      { title: 'pre', block: 'pre' }
    ] },

    { title: 'Containers', items: [
      { title: 'section', block: 'section', wrapper: true, merge_siblings: false },
      { title: 'article', block: 'article', wrapper: true, merge_siblings: false },
      { title: 'blockquote', block: 'blockquote', wrapper: true },
      { title: 'hgroup', block: 'hgroup', wrapper: true },
      { title: 'aside', block: 'aside', wrapper: true },
      { title: 'figure', block: 'figure', wrapper: true }
    ] }
  ],
  visualblocks_default_state: true,
  end_container_on_empty_block: true,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});

style_formats_autohide

This option enables auto hiding of styles that can’t be applied to the current context. For example: if a style applies only to tables, it wouldn’t be visible in the styles drop down when the caret isn’t inside a table. By default, irrelevant menu items are disabled

Type: Boolean Default: false

Example: Using style_formats_autohide

tinymce.init({
  selector: 'textarea',
  style_formats: [
    {title: 'Red cell', selector: 'td', classes: 'red'},
    {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}
  ],
  style_formats_autohide: true
});

style_formats_merge

This option allows you to set whether TinyMCE should append custom styles defined using the style_formats setting to the default style formats or completely replace them.

Type: Boolean Default: false

Example: Using style_formats_merge

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  style_formats: [
    {title: 'Bold text', inline: 'b'},
    {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}
  ],
  style_formats_merge: true
});

theme

The dedicated mobile theme, sometimes referred to as the legacy mobile theme was depreacted with the release of TinyMCE 5.1 and will be removed in TinyMCE 6.0. The silver theme was updated in TinyMCE 5.1 to provide an improved mobile experience.

This option allows you to specify the theme that TinyMCE should use. The default theme included with TinyMCE is called Silver.

The name of the theme should match the name of the folder within the themes directory of TinyMCE. If the specified theme is not found, TinyMCE will not load.

Type: String

Example: Using theme

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

theme_url

The dedicated mobile theme, sometimes referred to as the legacy mobile theme was depreacted with the release of TinyMCE 5.1 and will be removed in TinyMCE 6.0. The silver theme was updated in TinyMCE 5.1 to provide an improved mobile experience.

If you are using TinyMCE themes, this option enables you to specify the location of the theme file. This is useful if you are loading TinyMCE from one URL, for example a CDN, while loading a theme on, say, a local server.

Type: String

Example: Using theme_url

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

toolbar

This option allows you to specify the buttons and the order that they will appear on TinyMCE’s toolbar.

Grouping toolbar buttons

To specify the buttons that should appear on TinyMCE’s toolbar, the toolbar option should be provided with a space separated list of toolbar buttons. To create groups within this list, please add | pipe characters between the groups of buttons that you would like to create.

Type: String

Example grouped toolbar

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'undo redo | styleselect | bold italic | link image'
});
The size of toolbar groups affects the behavior of the toolbar drawer when the toolbar_mode is set to 'floating' (default value) or 'sliding'. For more information, see: the toolbar_mode setting.

Adding toolbar group labels

To specify labels to the grouped buttons that appear on TinyMCE’s toolbar, the toolbar option should be provided with an array of objects with name and items as object properties. The name should be a string value that will be set as the title attribute on the div containing the toolbar group. The items should be an array of strings that indicate the buttons that should appear within the particular toolbar group.

Type: Array

Example: Adding toolbar group labels
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: [
    {
      name: 'history', items: [ 'undo', 'redo' ]
    },
    {
      name: 'styles', items: [ 'styleselect' ]
    },
    {
      name: 'formatting', items: [ 'bold', 'italic']
    },
    {
      name: 'alignment', items: [ 'alignleft', 'aligncenter', 'alignright', 'alignjustify' ]
    },
    {
      name: 'indentation', items: [ 'outdent', 'indent' ]
    }
  ]
});

Disabling the toolbar

To disable the toolbar, the toolbar option should be provided a boolean value of false.

Type: Boolean

Default Value: true

Possible Values: true, false

Example: Disabling the toolbar

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

Using multiple toolbars

To specify multiple toolbars, the toolbar option should be provided with an array of space separated strings.

Type: Array

Example: Adding multiple toolbars

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

Alternatively, you may specify multiple toolbars through the use of the toolbar(n) option.

toolbar(n)

This option allows you to specify the buttons and the order that they will appear on instances of multiple toolbars.

Type: String

Example: Using toolbar(n)

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  toolbar1: 'undo redo | styleselect | bold italic | link image',
  toolbar2: 'alignleft aligncenter alignright'
});

Please see the toolbar configuration option for details.

toolbar_mode

The toolbar_drawer option was deprecated with the release of TinyMCE 5.2. The toolbar_drawer option was renamed to toolbar_mode. This change was made to reflect the range of settings available for this option. The toolbar_drawer option will be removed in TinyMCE 6.0.

The toolbar_mode option is used to extend the toolbar to accommodate the overflowing toolbar buttons. This option is useful for small screens or small editor frames.

When the toolbar_mode is set to 'floating' or sliding, the editor will move toolbar buttons to the toolbar drawer based on:

  • The defined toolbar groups.

  • The width of the editor.

For example. If the following toolbar configuration is wider than the editor, the items before the separator (|) will appear in the main toolbar and the rest will be moved to the toolbar drawer.

tinymce.init({
    selector: 'textarea',
    toolbar: 'undo redo styleselect bold italic alignleft aligncenter alignright alignjustify | bullist numlist outdent indent'
});

Two situations to consider when organising the toolbar:

  • When there are two or more toolbar button groups, the main toolbar will show as many complete, sequential toolbar groups as possible within the width of the editor. Any remaining toolbar button groups will be moved to the toolbar drawer.

  • If the first toolbar button group is wider than the editor, the whole toolbar will be shown in the toolbar drawer.

The toolbar modes are not available when using multiple toolbars or the toolbar(n) option.

Type: String

Default Value: 'floating'

Possible Values: 'floating', 'sliding', 'scrolling', or 'wrap'

The default option for this setting is different for mobile devices. For information on the default mobile setting, see: TinyMCE Mobile - Configuration settings with mobile defaults.

Settings

The toolbar mode is specified in the tinymce.init. There are four toolbar modes:

Floating

If the toolbar_mode is configured to floating, the toolbar appears under the toolbar overflow icon in a floating shelf format when the toolbar overflow icon Drawer is clicked.

Floating Toolbar
Configuring a Floating toolbar

Use the following settings to configure a Floating toolbar:

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

Sliding

If the toolbar_mode is configured to sliding, the toolbar appears as a fixed toolbar under the first toolbar when the toolbar overflow icon Drawer is clicked.

Sliding Toolbar
Configuring a Sliding toolbar

Use the following settings to configure a Sliding toolbar:

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

Scrolling

The scrolling toolbar mode is intended for touch screen devices.

If the toolbar_mode is configured to scrolling, the overflow toolbar buttons will remain on the toolbar, but will be hidden from view. To access the overflow toolbar buttons, scroll the toolbar. To scroll the toolbar on a touch screen, use a swiping action. To scroll on a desktop device, hold shift and scroll with a mouse.

A scrollbar will be shown on the toolbar on desktop devices and hybrid devices in desktop mode.

Scrolling Toolbar
Configuring a Scrolling toolbar

Use the following settings to configure a Scrolling toolbar:

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

Wrap

If the toolbar_mode is configured to wrap, the overflow toolbar buttons will be shown on one or more toolbars below the primary toolbar.

Wrapped Toolbar
Configuring a Wrapped toolbar

Use the following settings to configure a wrapped toolbar:

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

toolbar_groups

This feature is only available for TinyMCE 5.2 and later.

The toolbar_groups option creates a toolbar button that displays a collection of other toolbar buttons as a pop-up toolbar. The style of toolbar shown is based on the current toolbar mode. For example, if toolbar_mode is set to floating, the toolbar group pop-up will appear in a floating shelf.

The toolbar_groups feature is only supported when using the floating toolbar mode. If the toolbar_groups option is used with other toolbar modes, the toolbar group button will not be displayed and a warning message will be printed in the console.

This option accepts an object, mapping the button name to the group configuration. For details on configuring toolbar groups, see: group toolbar button configuration.

Type: Object

Example: toolbar_groups

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'formatting | alignleft aligncenter alignright',
  toolbar_groups: {
    formatting: {
      icon: 'bold',
      tooltip: 'Formatting',
      items: 'bold italic underline | superscript subscript'
    }
  }
});

toolbar_location

This feature is only available for TinyMCE 5.2 and later.

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

auto was added and set as the default in TinyMCE 5.3. For TinyMCE 5.2 users, the default value is top.

Possible values: auto, top, bottom

Example: Using toolbar_location

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

toolbar_persist

This feature is only available for TinyMCE 5.5 and later.

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

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

toolbar_sticky

This feature is only available for TinyMCE 5.1 and later.

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 option for this setting is different for mobile devices. For information on the default mobile setting, see: TinyMCE Mobile - Configuration settings with mobile defaults.

Example: toolbar_sticky

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

toolbar_sticky_offset

This feature is only available for TinyMCE 5.9 and later.

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: toolbar_sticky_offset

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

width

Set the width of the editor.

TinyMCE sets the width in pixels if a number is provided. However, if TinyMCE is provided a string it assumes the value is valid CSS and simply sets the editor’s width as the string value. This allows for alternate units such as %, em and vh.

Type: Number or String

Example: Using width

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