当从DOM中删除并重新添加时，CKEditor丢失内容 [英] CKEditor loses content when removed from DOM and added again

问题描述

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

CKEditor is a rich text editor that uses an iframe with an editable body.

我有一种情况，我需要暂时从我的页面中删除一个包含CKEditor实例的元素

I have a situation where I need to temporarily remove an element containing a CKEditor instance from my page, then add it back some arbitrary amount of time later.

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

Unfortunately, this seems to cause the iframe to reset. Where the editor originally contained the rich text content and an editable body element, after adding the editor back to the page the iframe body is empty and no longer editable.

我希望有人能解释为什么会发生这种情况，以及我如何重新初始化CKEditor一旦我添加到DOM。我已搜索过文档，但尚未找到答案。

I'm hoping someone can explain why this is happening and how I can reinitialize the CKEditor once I've added it back to the DOM. I've searched the documentation and have yet to find an answer.

销毁实例并重新创建是可能的，但它会需要对我们的架构进行一些重大改变。我宁愿避免，如果可能的话。

Destroying the instance and re-creating is possible, but it's going to require some significant changes to our architecture. I'd rather avoid that, if possible. (Though "there's no other option" is an acceptable answer, if true.)

这是一个可以接受的答案我的代码的非常简化的版本，重现问题：

Here's an extremely simplified version of my code which recreates the issue:

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 上面的函数来恢复编辑器的内容？

What can I add to the hideshow function above to restore the content of my editor?

推荐答案

我希望有人可以解释为什么会发生这种情况，以及我如何重新初始化CKEditor一旦我把它添加到DOM。我已经搜索了文档，但尚未找到答案。

I'm hoping someone can explain why this is happening and how I can reinitialize the CKEditor once I've added it back to the DOM. I've searched the documentation and have yet to find an answer.

破坏实例并重新创建是可能的，但它将需要对我们的架构进行一些重大更改。我宁愿避免，如果可能的话。 （虽然没有其他选项是可接受的答案，如果是真的）。​​

Destroying the instance and re-creating is possible, but it's going to require some significant changes to our architecture. I'd rather avoid that, if possible. (Though "there's no other option" is an acceptable answer, if true.)

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

The answer is that there is no other option if you want to use iframed editor. In such case, the editor must be reinitialised.

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

The reason why iframe's content disappears is unrelated to CKEditor – it's purely a browser behaviour. It could be theoretically possible that CKEditor would listen to some unload event and cached the data (if that's possible at that point) so they can be restored at some point. However, it would be pretty complicated, so the core plugin does not do that. You could try to write a plugin that enhances the wysiwygarea plugin, but it might be tricky.

您希望继续使用iframed编辑器，然后手动重新初始化似乎是最简单的选项。

So, if you want to keep using the iframed editor, then manual reinitialising seems to be the easiest option.

另一个选项是使用 divarea 使CKEditor使用简单 div 而不是 iframe 。这有一些优点，如没有卸载问题，一般更轻，但当然可能更难编辑编辑器的内容。

The other option is to use the divarea plugin which makes CKEditor use simple div rather than iframe. This has some advantages like no problems with unloading and being generally lighter, but of course it may be harder to style contents of the editor.

这篇关于当从DOM中删除并重新添加时，CKEditor丢失内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！