CKEditor loses content when removed from DOM and a

Question

Context

CKEditor is a rich text editor that uses an iframe with an editable body.

I have a situation where I need to temporarily remove an element containing a CKEditor instance from my page, then add it back some arbitrary amount of time later.

Problem

Unfortunately, this seems to cause the iframe to reset. Where the editor originally contained the rich text content and an editable body element, after adding the editor back to the page the iframe body is empty and no longer editable.

Question

I'm hoping someone can explain why this is happening and how I can reinitialize the CKEditor once I've added it back to the DOM. I've searched the documentation and have yet to find an answer.

Destroying the instance and re-creating is possible, but it's going to require some significant changes to our architecture. I'd rather avoid that, if possible. (Though "there's no other option" is an acceptable answer, if true.)

Example

Here's an extremely simplified version of my code which recreates the issue:

CKEDITOR.replace('text');

var wrapper = $("#wrapper"),
    parent = $("#parent");

// Immediately after creating the CKEditor instance,
// it is possible to remove and append the editor
hideshow();

// Remove and append some moments after the page load causes
// the content of the CKEditor to be lost (and not editable)
$('#hideshow').click(hideshow);
// (I'm guessing this is because the click event happens
// sometime after the editor is initialized.)

function hideshow(){
    wrapper.remove();
    parent.append(wrapper);
}

http://jsfiddle.net/cyborgx37/f496p7us/

What can I add to the hideshow function above to restore the content of my editor?

Answer 1

I'm hoping someone can explain why this is happening and how I can reinitialize the CKEditor once I've added it back to the DOM. I've searched the documentation and have yet to find an answer.

Destroying the instance and re-creating is possible, but it's going to require some significant changes to our architecture. I'd rather avoid that, if possible. (Though "there's no other option" is an acceptable answer, if true.)

The answer is that there is no other option if you want to use iframed editor. In such case, the editor must be reinitialised.

The reason why iframe's content disappears is unrelated to CKEditor – it's purely a browser behaviour. It could be theoretically possible that CKEditor would listen to some unload event and cached the data (if that's possible at that point) so they can be restored at some point. However, it would be pretty complicated, so the core plugin does not do that. You could try to write a plugin that enhances the wysiwygarea plugin, but it might be tricky.

So, if you want to keep using the iframed editor, then manual reinitialising seems to be the easiest option.

The other option is to use the divarea plugin which makes CKEditor use simple div rather than iframe. This has some advantages like no problems with unloading and being generally lighter, but of course it may be harder to style contents of the editor.