删除并附加到 DOM 后 CKEditor 损坏

Question

我正在将 CKEditor 集成到使用“选项卡”一次显示多个屏幕的更大项目中。切换选项卡时，我分离了包含 CKEditor 的选项卡 div。当我再次附加时，CKEditor 已损坏。它是可见的，但它会丢失文本，并且无法再在其中写入文本。

示例代码:

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

你可以在这里试试: http://jsfiddle.net/kxtxz/6/

有没有人经历过并最终解决了类似的问题？

Answer 1

CKEditor 实例背后的逻辑非常依赖于 DOM 结构，如果你修改它，它确实会被破坏。

但是有一个简单的解决方案。分离前先获取数据:

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

然后基本上调用:

CKEDITOR.instances.instanceName.destroy();

分离时，并重新创建编辑器

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

贴的时候。