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">
  <h1>Welcome to TinyMCE!</h1>
  <p>⭐️ Let's <em>explore</em> some features 🗺️ like <span style="background-color: #bfedd2;">footnotes</span>, <span style="background-color: #c2e0f4;">spellchecking</span> and <span style="background-color: #fbeeb8;">export to PDF</span>...</p>
</textarea>
tinymce.init({
  selector: 'textarea#default',
  plugins: [
    "advlist", "autolink", "charmap", "codesample", "emoticons", "help",
    "image", "link", "lists", "searchreplace", "table", "wordcount",
    // Premium features
    "advcode", "autocorrect", "footnotes", "mediaembed", 
    "powerpaste", "tinymcespellchecker", "casechange", "checklist", 
    "formatpainter", "permanentpen", "advtable", "tableofcontents", "exportpdf"
  ],
  toolbar: "exportpdf | spellcheckdialog | styles | bold italic underline strikethrough | align bullist numlist | link image emoticons footnotes checklist formatpainter permanentpen tableofcontents",
});

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