2010-03-29 6 views
10

En una página que tengo, necesito mover los editores de TinyMCE en el árbol DOM de vez en cuando. Sin embargo, por alguna razón, al editor no le gusta: se borra completamente y se vuelve inutilizable. Por lo que puedo ver, este comportamiento es consistente entre Safari 4 y Firefox 3.6, pero no con Internet Explorer 7/8. Here's an example.El editor de TinyMCE no le gusta moverse alrededor de

Realmente me molesta hacer algo que funciona en Internet Explorer pero no con navegadores más apreciables. ¿Hay algo que omití en los documentos sobre nunca tratar de mover un editor en el árbol DOM? ¿Hay algún tipo de solución?

+0

¿Podría ser que todos los controladores de eventos pierdan vínculos con los elementos cuando se mueve? – alex

+0

@alex: poco probable. Los detectores de eventos en los elementos se mantienen incluso si no están enraizados en el documento. – zneak

+0

Sí, tienes razón. Acabo de recordar que los perdiste al usar 'innerHTML'. Pero acabo de verificar su fuente, y está usando métodos DOM adecuados. ¿CKeditor hace lo mismo? – alex

Respuesta

7

Este es un error/problema del navegador no es un problema con TinyMCE. Es imposible retener el contenido del iframe en algunos navegadores ya que una vez que se elimina el nodo del dom se descarga el documento/ventana. Sugiero primero eliminar la instancia del editor y luego volver a agregarla en lugar de moverla al DOM.

+0

Eso es lo que he estado haciendo inicialmente, pero estaba teniendo problemas con 'document_base_url' estropeando mis imágenes en guardar. Eso no estaba relacionado y lo arreglé (con 'convert_urls' a' false'). Pero bueno, funciona, y mereces un representante. – zneak

+0

¡No se puede obtener una mejor respuesta que una del desarrollador principal de TinyMCE! +1 – alex

8

tenían el mismo problema y así es como lo resolví ...

Crear el tema

que usar jQuery para mover el elemento DOM que contiene el editor TinyMCE que hace que se pierda todo lo que es contenido:

$('.form-group:last').after($('.form-group:first')) 

Después de este punto, se eliminan los contenidos del iframe del editor.

La solución

var textareaId = 'id_of_textarea'; 
tinyMCE.get(textareaId).remove(); 
tinyMCE.execCommand("mceAddEditor", false, textareaId); 

Hay momentos en que el editor se sumará el iframe espalda, pero no será visible. Si ese es el caso, muestre el contenedor:

$textarea = $('#' + textareaId) 
$textarea.closest('.mce-tinymce.mce-container').show() 

Nota, esto está utilizando tinymce 4.x.

+1

Gracias, eso funcionó para mí también. – lucaswxp

+1

gracias por las instrucciones claras! – srvy

Cuestiones relacionadas