How do I remove tinyMCE and then re-add it?

Solution 1:

To cleanly remove an editor instance and avoid any errors use:

tinymce.EditorManager.execCommand('mceRemoveControl',true, editor_id);

To reinitialize the instance use:

tinymce.EditorManager.execCommand('mceAddControl',true, editor_id);

Be aware that when moving TinyMCE editors in the DOM you need to removeControl and addControl too, otherwise it results in JS errors.

As of TinyMCE 4 the methods to remove and reinitialize an instance are now...

To cleanly remove an editor instance and avoid any errors use:

tinymce.EditorManager.execCommand('mceRemoveEditor',true, editor_id);

To reinitialize the instance use:

tinymce.EditorManager.execCommand('mceAddEditor',true, editor_id);

Solution 2:

Late to the party but it might save someone the headache. Here's what worked for me on version 4.2.4 (2015-08-17):

tinymce.EditorManager.editors = []; 

Then I could re-init an editor on the same dynamically created div

tinymce.init({selector:"#text"});   

Edit : 2020-06-20

With version: 5.2.x, do

 tinymce.activeEditor.destroy();
 

or

 tinymce.remove('#myeditor');

Solution 3:

This works for me:

if (typeof(tinyMCE) != "undefined") {
  if (tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() != false) {
    tinyMCE.editors=[]; // remove any existing references
  }
}

Solution 4:

It is now possible to just do

tinymce.remove("#id .class or tag");