CKEditor loses content when removed from the DOM and adds again

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 the element containing the CKEditor instance from my page, and then add it back after a while.

Problem

Unfortunately, this looks like an iframe to reset. When the editor initially contained rich text content and an editable body element, after adding the editor to the page, the iframe body is empty and can no longer be edited.

Question

I hope someone can explain why this happens and how I can reinitialize CKEditor as soon as I add it back to the DOM. I was looking for documentation and have not yet found an answer.

Destroying an instance and re-creating it is possible, but it will require significant changes in our architecture. I would rather avoid this if possible. (Although “there is no other option” is an acceptable answer, if true.)

Example

Here's a very simplified version of my code that recreates the problem:

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 function hideshowabove to restore the contents of my editor?

Answer 1

I hope someone can explain why this happens and how I can reinitialize CKEditor as soon as I add it back to the DOM. I was looking for documentation and have not yet found an answer.

Destroying an instance and re-creating it is possible, but it will require significant changes in our architecture. I would rather avoid this if possible. (Although “there is no other option” is an acceptable answer, if true.)

, , iframed. .

iframe CKEditor - . , CKEditor - unload ( ), - . , . , wysiwygarea, .

, iframed-, .

- divarea, CKEditor div, iframe. , , , , , , .