TinyMCE editor dislikes being moved around

Question

On a page I have, I need to move TinyMCE editors in the DOM tree once in a while. However, for some reason, the editor doesn't like it: it clears itself completely and becomes unusable. As far as I can see, this behavior is consistent between Safari 4 and Firefox 3.6, but not Internet Explorer 7/8. Here's an example.

It truly is annoying to do something that works in Internet Explorer but not with more appreciable browsers. Is there something I missed in the docs about never trying to move an editor in the DOM tree? Is there some kind of workaround?

Answer 1

This is a browser bug/issue not a problem with TinyMCE. It's impossible to retain iframe contents in some browsers since once you remove the node from the dom the document/window unloads. I suggest first removing the editor instance then re-adding it instead of moving it in the DOM.

Answer 2

Had the same issue and here's how I resolved it...

Create the issue

I use jquery to move the dom element that contains the tinymce editor that causes it to lose all it's contents:

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

After this point, the editor's iframe contents are removed.

The Solution

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

There are times when the editor will add the iframe back, but not be visible. If that's the case, unhide the container:

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

Note, this is using tinymce 4.x.