CKEditor broken after remove and append to DOM

Question

I'm integrating CKEditor to bigger project that uses "tabs" to display multiple screens at a time. When switching tabs I detach the tab div containing also CKEditor. When I attach it again, CKEditor is broken. It is visible but it looses text and it is not possible to write text in it anymore.

Example code:

<script src="http://ckeditor.com/apps/ckeditor/4.2/ckeditor.js?mriyyd"></script>
<div id="section1">
    <script>
        CKEDITOR.appendTo('section1',
        null,
            '<p>This is some <strong>sample text</strong>.</p>');
    </script>
</div>
<script>
    var s = document.getElementById('section1');
    var sP = s.parentNode;
</script>
<button onClick="sP.removeChild(s);">Detach</button>
<button onClick="sP.appendChild(s);">Attach</button>

You can try it here: http://jsfiddle.net/kxtxz/6/

Has anyone experienced and eventually solved similar problem?

Answer 1

The logic behind CKEditor instance relies on DOM structure so much that it will, indeed, get broken, if you modify it.

But there's a simple solution for that. Get data with first before detaching:

var savedData = CKEDITOR.instances.instanceName.getData();

Then basically call:

CKEDITOR.instances.instanceName.destroy();

when detaching, and re-create the editor back again with

CKEDITOR.appendTo( 'section1', null, savedData );

when attaching.