Remove TinyMCE control and re-add

Question

I have a js application that never reloads the page, so when navigating I need to remove TinyMCE controls entirely, and then I want to re-initialize when navigating to an area that needs it. I tried the accepted answer to this question, but it seems to do nothing.

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

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

and my specific implimentation:

  //if I throw an alert here, it does get called, so I know it's not null
  if (tinyMCE.getInstanceById("main-text"))
            tinyMCE.EditorManager.execCommand('mceRemoveControl', true, "main-text");

I also tried

  tinyMCE.remove( tinyMCE.getInstanceById("main-text"));
  // AND
  tinyMCE.remove( "main-text");

I know that that statement gets executed when I put an alert in the conditional... I know that is the correct ID-- Is there something else buried in the API that I'm missing? This is Not the jQuery version. The editor persists after the remove attempt, and I even get a new one with the same ID if i re-init it by navigating back to the state with the form.

EDIT: the solution below does not work in current build 3.5b3, only in 3.4.9. There is a bug where 't is undefined'

Just in case, this is the relevant part of the DOM after the init.

 <textarea id="main-text" style="display: none;" aria-hidden="true"></textarea>
<span id="main-text_parent" class="mceEditor defaultSkin" role="application" aria-labelledby="main-text_voice" style="display: inherit;">
<span id="main-text_voice" class="mceVoiceLabel" style="display:none;">Rich Text Area</span>
<table id="main-text_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%; height: 400px;">
<tbody>
<tr class="mceFirst" role="presentation">
<td class="mceToolbar mceLeft mceFirst mceLast" role="presentation">
<div id="main-text_toolbargroup" aria-labelledby="main-text_toolbargroup_voice" role="group" tabindex="-1">
<span role="application">
</div>
<a onfocus="tinyMCE.getInstanceById('main-text').focus();" title="Jump to tool buttons - Alt+Q, Jump to editor - Alt-Z, Jump to element path - Alt-X" accesskey="z" href="#"></a>
</td>
</tr>
<tr>
<tr class="mceLast">
</tbody>
</table>
</span>

Answer 1

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.
}

Answer 2

Any one who come across this post. Now tinymce 4.X have support for Removing a editor or editors form page just by calling remove function.

http://www.tinymce.com/wiki.php/api4:method.tinymce.remove

// Remove all editors bound to divs
tinymce.remove('div');

// Remove all editors bound to textareas
tinymce.remove('textarea');

// Remove all editors
tinymce.remove();

// Remove specific instance by id
tinymce.remove('#id');