Quitar el control TinyMCE y volver a agregar

Question

Tengo una aplicación js que nunca vuelve a cargar la página, por lo que cuando navegue necesito quitar completamente los controles TinyMCE, y luego quiero reinicializarme cuando navegue a un área que lo necesite. Probé la respuesta aceptada a esta pregunta, pero parece que no hace nada.

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

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

y mi implimentation específica:

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

También probé

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

Sé que esta afirmación es ejecutado cuando pongo una alerta en condicional. .. Sé que es la ID correcta-- ¿Hay algo más enterrado en la API que ¿Me estoy perdiendo? Esta no es la versión jQuery. El editor persiste después del intento de eliminación, e incluso obtengo uno nuevo con la misma ID si reinicio volviendo al estado con el formulario.

EDITAR: la solución a continuación no funciona en la compilación actual 3.5b3, solo en 3.4.9. Hay un error donde 't no está definido'

Por las dudas, esta es la parte relevante del DOM después del inicio.

<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

Me he topado con esto unas cuantas veces. Para resolverlo, me aseguro de que el control tinyMCe no tenga el foco (causa algunos errores en algunos navegadores), elimine el control tinyMCE y elimine el área de texto con la que se asoció el control.

Aquí está el código correspondiente:

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

Cualquiera que venga con este post. Ahora tinymce 4.X tienen soporte para eliminar una página de formulario del editor o editores simplemente llamando a la función de eliminación.

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