从 DOM 中删除编辑器后如何删除 CKeditor 实例

Posted 2023-05-09

【中文标题】从 DOM 中删除编辑器后如何删除 CKeditor 实例

【英文标题】：How to remove CKeditor instances after the editor has been removed from the DOM

【发布时间】：2015-05-05 16:22:42

【问题描述】：

关于如何删除 CKeditor 实例有一些关于 SO 的相关问题，大多数使用.destroy()。但是，当编辑器仍在 dom 中时，这很好。我有一种情况，CMS 正在添加一个文本区域，我将其转换为 CKeditor。 cms 从 dom 中移动元素（在不相关的事件中）。

我可以将一个事件绑定到该不相关事件的complete 发射，以便可以重新初始化 CKeditor。一切正常，但是当我删除那些剩余的实例时，我得到了错误，这就是我尝试的方式：

for (var name in CKEDITOR.instances) 
    CKEDITOR.instances[name].destroy(true);

但它会产生错误：

未捕获的类型错误：无法读取 null 的属性“clearCustomData”

我有recreated the issue on a jsfiddle你会看到代码：

从文本区域创建 ckeditor 实例 移除父 dom 元素 创建新的 dom 元素 试图删除所有当前实例 创建一个新的 ckeditor 实例

第 4 步产生错误。

n.b. 有关删除 ckeditor 实例的相关问题与仍然存在的 dom 元素有关，在这种情况下 dom 已被删除。我无法控制被移除的 dom 元素。

有没有办法将事件绑定到 ckeditor，当它的父 dom 元素被删除时触发？我想即使是这样，我仍然会遇到这个问题。有人知道吗？

nb 我在这个项目的其他地方使用 jQuery，所以即使我没有在ckeditor 代码。

更新：

我确实尝试将实例设置为null，这确实有效，但不会终止在 CKeditor 实例上创建的对象。即CKEDITOR.htmlDataProcessor （在 Chrome 开发工具中使用“配置文件 -> 堆快照”是该问题的一个很好的演示）

更新：

感谢@oleq 提供的信息，我查看了讨论，但不知道如何添加，所以在这里更新：

请查看 dom 更改前后 mem 配置文件的图像。

您会看到 CKEDITOR 属性的大小确实增加了。

我注意到CKEDITOR.instances.editor1.element.$ 存储了 ckeditor 已绑定/触发的元素。是否会检查该元素上的现有 ckeditor 实例，这会破坏现有的 CKEDITOR.htmlDataProcessor 等对象并在将新实例添加到文本区域之前重新创建？

这听起来是否合适，或者这被视为边缘情况这一事实是否意味着它的优先级太低？如果认为是合理的解决方案，我很乐意投入工作并提出请求？

【参考方案1】：

问题的根本原因似乎已在 https://github.com/ckeditor/ckeditor-dev/pull/200 中修复

简而言之 - 在您调用 destroy 之前，iFrame 元素已从 DOM 中分离/删除，这会导致 ckEditor getFrame 方法返回 null。

在升级到最新的 ckEditor 版本之前，我的解决方法是将销毁放在 try/catch 中。

【参考方案2】：

控制 CKEditor 实例销毁的算法不是为处理极端情况而设计的。在that specific point in wysiwygarea plugin 处抛出错误，因为基本上editor.window.getFrame() 返回null。

这是一个极端情况，already discussed on CKEditor bug tracker。

【讨论】：

谢谢。已使用提案/附加信息更新问题