javascript - 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

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