Question

上下文

CKEditor是一个富文本编辑器，它使用带有可编辑主体的iframe。

我有一种情况需要暂时从我的页面中删除包含CKEditor实例的元素，然后在任意时间后将其添加回来。

问题

不幸的是，这似乎导致iframe重置。如果编辑器最初包含富文本内容和可编辑的body元素，则在将编辑器添加回页面后，iframe正文为空且不再可编辑。

问题

我希望有人可以解释为什么会发生这种情况以及如何在将CKEditor添加回DOM后重新初始化CKEditor。我搜索了文档并且还没有找到答案。

销毁实例并重新创建可能，但这需要对我们的架构进行一些重大更改。如果可能的话，我宁愿避免这样做。（虽然“没有其他选择”是可接受的答案，如果是真的。）

实施例

这是我的代码的极简化版本，它重现了这个问题：

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/

我可以在上面的hideshow函数中添加什么来恢复编辑器的内容？

Answer 1

我希望有人可以解释为什么会这样，以及在我将CKEditor添加回DOM后如何重新初始化CKEditor。我已经搜索了文档，但还没有找到答案。

销毁实例并重新创建是可能的，但它需要对我们的架构进行一些重大更改。如果可能的话，我宁愿避免这样做。（虽然＆＃34;没有其他选择＆＃34;是可接受的答案，如果是真的。）

答案是如果你想使用iframed编辑器，没有其他选择。在这种情况下，必须重新初始化编辑器。

iframe内容消失的原因与CKEditor无关 - 它纯粹是一种浏览器行为。从理论上讲，CKEditor可以监听某些unload事件并缓存数据（如果那时可能的话），这样就可以在某个时刻恢复它们。但是，它会非常复杂，因此核心插件不会这样做。您可以尝试编写一个增强wysiwygarea插件的插件，但这可能很棘手。

因此，如果您想继续使用iframed编辑器，那么手动重新初始化似乎是最简单的选择。

另一种选择是使用divarea插件，这使得CKEditor使用简单的div而不是iframe。这有一些优点，例如卸载没有问题，而且通常更轻，但当然可能更难设计编辑器的内容。

从DOM中删除时CKEditor会丢失内容并再次添加

上下文

问题

问题

实施例

1 个答案: