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

Question

I am trying to add the tinyMCE editor to my page, remove it, then add it again but am getting errors.

When I run Part A, then Part B, Than Part A again I get the error:

Error: g.win.document is null Source File: tiny_mce/tiny_mce.js Line: 1 

Part A

tinyMCE.init({     'mode' : 'exact',     'elements' : '" + ctrl.ID + "Editor',     'plugins' : 'insertdatetime,TVCMSLink,TVCMSImage',     'theme' : 'advanced',     'theme_advanced_layout_manager' : 'SimpleLayout',     'theme_advanced_buttons1' : 'backcolor, forecolor, |, bold, underline, strikethrough, |, numlist, bullist, charmap, |, undo, redo, |, anchor, link, tvlink, unlink',     'theme_advanced_buttons2' : '',     'theme_advanced_buttons3' : '' }); 

Part B

tinyMCE.getInstanceById('" + ctrl.ID + "Editor').remove(); 

Edit:

Below is the full JavaScript function. The first time through it opens the dialog and works, the contents is in the editor and there is no error. When I click the close button, the dialog is closed. When I run the function again, the dialog displays but the editor is empty and there is the above error.

function show_HP1B0() { $('.EditLink').hide(); $.ajax({     type: 'post',     url: 'genericHandler.ashx',     data: 'cmd=select&tableName=ExtraBlocks&id=4',     dataType: 'json',     success: function(data) {         $('#HP1B0Editor').html(data['rows'][0]['Content']);         alert($('#HP1B0Editor').html());         tinyMCE.init({                 'mode' : 'exact',              'elements' : 'HP1B0Editor',              'plugins' : 'insertdatetime,Link,Image',             'theme' : 'advanced',             'theme_advanced_layout_manager' : 'SimpleLayout',             'theme_advanced_buttons1' : 'backcolor, forecolor, |, bold, underline, strikethrough, |, numlist, bullist, charmap, |, undo, redo, |, anchor, link, tvlink, unlink',             'theme_advanced_buttons2' : '',             'theme_advanced_buttons3' : ''         });         var dlg = $('#ctl00_EXTRA_HTML_0_HP1B0Editor').dialog({             modal: false,             draggable: false,             position: 'center',             zIndex: 99999,  // Above the overlay             width: 370,             title: 'Content Block Editor',             closeText: '',             open: function () {                 $('body').css('overflow', 'hidden');                 if ($.browser.msie) { $('html').css('overflow', 'hidden'); } $('<div>').attr('id', 'loader').appendTo('body').show();             },             close: function () { $('body').css('overflow', 'auto'); if ($.browser.msie) { $('html').css('overflow', 'auto'); } $('#loader').remove(); },             buttons: {                 'Save': function () {                     tinyMCE.getInstanceById('HP1B0Editor').remove();                     $('.EditLink').show();                     $(this).dialog('close');                 },                 'Cancel': function () {         alert('HP1B0Editor');                     tinyMCE.getInstanceById('HP1B0Editor').remove();                     $('.EditLink').show();                     $(this).dialog('close');                 }             }         }).parent();         dlg.appendTo(jQuery('form:first'));     },     error: function(data) {         $('.EditLink').show();         $('#HP1B0Editor').html('Error');     } }); } 

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