How to Remove Tinymce and Then Re-Add It

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

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

Remove TinyMCE control and re-add

I've run into this a few times. To solve it i make sure the tinyMCe control doesn't have focus (causes some bugs in some browsers), remove the tinyMCE control, and remove the text area that the control was associated with.

Here's the relevant code:

if (typeof tinyMCE != 'undefined') {
    tinyMCE.execCommand('mceFocus', false, 'main-text');
    tinyMCE.execCommand('mceRemoveControl', false, 'main-text');
    var container = document.getElementById('main-text-parent');
    container.removeChild(document.getElementById('main-text'));  
    //i normally just do $("#main-text").remove(); but you specified not using jquery, so this should, in theory, remove it, if main-text-parent is replaced with the parent container of your main-text.
}

Reinitialize TinyMCE 4 in AJAX

Problem here is that closing the box without shutting down the inner tinymce instance properly will result in not showing the editor the second time (because there is still a tinymce editor object in the variable window.tinymce.editors).

Solution: onclose (in fact before destroying or removing) of the box shut down the editor.

TinyMCE 4 - remove() or destroy()

You need an editor id (which usually equals your editor html root elements id (in most cases a textarea)).

Example:

tinymce.execCommand('mceRemoveControl', true, 'my_original_textarea_id');

Adding and Removing tinyMCE instances within jQuery instances

I know this is an oldish post but incase someone if googling for this issue:

I am not sure what you are trying to achieve with the refresh call to sortable.

but this is what I did to make it work for me

I am using the jquery.tinymce - just to try it out..
I have the tinymce settings elsewhere so I can call different settings depending what I am initializing but the concept is sound - so here are my start and stop methods for sortable

start : function(event, ui) {
// mce editor needs to be removed and readded when move finsihed
     $("textarea",ui.item).tinymce().remove();
},
stop : function(event, ui) {
     $("textarea",ui.item).tinymce(myconfig.tinymcesettings);
}