TinyMCE classic editing mode

TinyMCE has three main integration modes:

  • "classic" full editor mode

  • inline editing mode

  • distraction-free mode

There are a few important differences between these modes:

  • Classic mode embeds an iframe in the page, which sandboxes the content and styles used in the content area.

  • Inline mode does not use an iframe; the editor is run on the selected HTML element.

  • The lack of sandboxing for the inline editor allows page scripts and styles to be used in the editor.

  • Distraction-free mode is an inline editor with additional configuration to provide greater functionality.

Classic mode refers to the standard TinyMCE integration. Such as:

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

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

Example: replacing a textarea with the default editor

A basic TinyMCE editor can be added to a textarea element with the id mytextarea using:

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