TinyMCE editor dislikes being moved around

13
votes

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?

2
htmldomtinymce
Could it be all the event handlers lose being bound to the elements when it is moved? - alex
@alex: Unlikely. Event listeners on elements are maintained even if they're not rooted to the document. - zneak
Yeah, you're right. I just remembered you lost them when using innerHTML. But I just checked your source, and you are using proper DOM methods. Does CKeditor do the same thing - alex
@alex: I don't know. I'm not home right now, so I'll check that later. If CKEditor does it better I guess I'll just forget about TinyMCE. - zneak
I've switched to CKeditor after a lot of pain caused by others. It's got a large footprint, but it's pretty good. - alex

2 Answers

9
votes

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.

10
votes

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.