Toggling TinyMCE v4

Dec 6, 2016

Here’s an easy way to turn on and off the TinyMCE editor for version 4.

document.getElementById('toggle-tinymce').addEventListener('click', function(e) {
  e.preventDefault();

  var editorID = this.dataset.editorId;
  var editor   = tinymce.EditorManager.get(editorID);

  if (editor) {
    editor.remove();
  } else {
    editor = tinymce.EditorManager.createEditor(editorID, tinyMCE.settings);
    editor.render();
  }
});

You simply then need to create a link or button as such:

<a href="#" id="toggle-tinymce" editor-id="your-editor-id">Toggle</a>

That’s it. It will remove the TinyMCE if enabled, and if not, it will re-render by re-creating the editor with settings provided by tinyMCE.settings.