Inline editor options

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:

<h1>This text is <strong>bold text</strong> in a heading</h1>

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.

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