CKEditor interrotto dopo rimuovere e aggiungere al DOM

Question

Sto integrando CKEditor in un progetto più grande che utilizza "schede" per visualizzare più schermi alla volta. Quando si passa da una scheda all'altro, rimuovo il div della scheda contenente anche CKEditor. Quando lo allego di nuovo, CKEditor è rotto. È visibile ma perde il testo e non è più possibile scrivere testo in esso.

codice Esempio:

<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> 

si può provare qui: http://jsfiddle.net/kxtxz/6/

chiunque ha sperimentato e, infine, risolto problema simile?

Answer 1

La logica dietro l'istanza di CKEditor si basa sulla struttura DOM così tanto che, in caso di modifica, si rompe.

Ma c'è una soluzione semplice per questo. Ottenere i dati con prima di staccare:

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

Poi fondamentalmente chiamano:

CKEDITOR.instances.instanceName.destroy(); 

quando distacco, e ricreare l'editor di nuovo con

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

quando si collega.