CKEditor 实例已经存在

IT技术 javascript ckeditor
2021-03-13 05:11:10

我正在使用 jquery 对话框来呈现表单（通过 AJAX 获取）。在某些表单上，我为 textareas 使用了 CKEditor。编辑器在第一次加载时显示良好。

当用户取消对话框时，我将删除内容，以便在以后的请求中重新加载它们。问题是，一旦对话框重新加载，CKEditor 就会声称编辑器已经存在。

uncaught exception: [CKEDITOR.editor] The instance "textarea_name" already exists.

API 包括一种销毁现有编辑器的方法，我看到有人声称这是一个解决方案：

if (CKEDITOR.instances['textarea_name']) {
CKEDITOR.instances['textarea_name'].destroy();
}
CKEDITOR.replace('textarea_name');

这对我不起作用，因为我收到了一个新错误：

TypeError: Result of expression 'i.contentWindow' [null] is not an object.

此错误似乎发生在“destroy()”而不是“replace()”上。有没有人经历过这个并找到了不同的解决方案？

是否可以“重新渲染”现有的编辑器，而不是破坏和替换它？

更新 这是另一个处理相同问题的问题，但他提供了一个可下载的测试用例。

6个回答

为此，您需要在销毁实例时传递布尔参数true：

    var editor = CKEDITOR.instances[name];
    if (editor) { editor.destroy(true); }
    CKEDITOR.replace(name);
谢谢，这真的帮了我。
2021-04-21 05:11:10
这个答案非常有用，我很惊讶它被埋在这里这么深。
2021-04-27 05:11:10
应该有一个选项可以根据他们收到的票数对答案进行排序......所以最好的答案会出现在最前面。
2021-04-28 05:11:10
“真”选项使一切变得不同。还值得一提的是，下面给出的“CKEDITOR.remove(instance)”答案并不是一个好的解决方案，因为它是一个内部API，也会产生错误，最好使用 instance.destroy(true)
2021-05-02 05:11:10
加入感谢合唱团！我喜欢 Stack Overflow 总是通过一次搜索解决我所有的问题。
2021-05-12 05:11:10 
function loadEditor(id)
{
    var instance = CKEDITOR.instances[id];
    if(instance)
    {
        CKEDITOR.remove(instance);
    }
    CKEDITOR.replace(id);
}
我在 firefox 中遇到了类似的问题，页面上有三个 CKEditor 实例，第一个没有显示，但另外两个在那里，我添加了上面的代码，现在所有编辑器都出现了
2021-04-17 05:11:10
这让我有点难过，但你的解决方案有所帮助。谢谢！
2021-04-24 05:11:10
遇到了同样的情况，如上所述，这个答案是不正确的。使用 destroy() 并传递 true 参数最终对我有用，如下所述。
2021-05-05 05:11:10
不要使用 CKEDITOR.remove 因为它只从数组中清除元素，但将所有 DOM 留在内存中。它在文档中说明它是供内部使用的：docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.remove你应该像 madhaviaddanki 所说的那样使用 instace.destroy() 。
2021-05-11 05:11:10

我也有这个问题，但我用更简单的方式解决了它......

我在我的 jQuery 脚本中使用类“ckeditor”作为我想用于 CKEditor 的文本区域的选择器。默认的 ckeditor JS 脚本也使用这个类来识别哪些 textareas 用于 CKEditor。

这意味着我的 jQuery 脚本和默认的 ckeditor 脚本之间存在冲突。

我只是将 textarea 的类和我的 jQuery 脚本更改为“do_ckeditor”（您可以使用除“ckeditor”之外的任何内容）并且它起作用了。

谢谢，是的，“自动”ckeditorizing 也惹恼了我。另见stackoverflow.com/a/3631391/923817
2021-05-03 05:11:10

这是对我有用的最简单（也是唯一）的解决方案：

if(CKEDITOR.instances[editorName])
   delete CKEDITOR.instances[editorName];
CKEDITOR.replace(editorName);

删除数组中的此条目可防止此表单安全检查破坏您的应用程序。

destroy() 和 remove() 对我不起作用。

我确实让 destroy() 起作用了。但无论是delete或destroy()完全清理编辑器实例。诸如字典和其他相关对象之类的东西仍然会潜伏在周围。
2021-04-18 05:11:10
我尝试了 instance.destroy(true)，但它对我不起作用。但是这个对我有用。谁能告诉我，这有什么副作用吗？
2021-05-08 05:11:10
这也是唯一与我一起使用的解决方案，感谢发布！
2021-05-13 05:11:10

也许这会帮助你 - 我已经使用 jquery 做了类似的事情，除了我加载了未知数量的 ckeditor 对象。我花了一段时间才偶然发现这一点 - 文档中不清楚。

function loadEditors() {
    var $editors = $("textarea.ckeditor");
    if ($editors.length) {
        $editors.each(function() {
            var editorID = $(this).attr("id");
            var instance = CKEDITOR.instances[editorID];
            if (instance) { instance.destroy(true); }
            CKEDITOR.replace(editorID);
        });
    }
}

这是我从编辑器那里获取内容的运行方式：

    var $editors = $("textarea.ckeditor");
    if ($editors.length) {
        $editors.each(function() {
            var instance = CKEDITOR.instances[$(this).attr("id")];
            if (instance) { $(this).val(instance.getData()); }
        });
    }

更新：我已更改答案以使用正确的方法 - 即 .destroy()。.remove() 应该是内部的，并且在某一时刻没有正确记录。

这似乎消除了错误，但在第二次渲染时，textarea 现在包含“null”，我无法再与工具栏或 textarea 交互。如果我点击工具栏按钮，我会收到如下错误：“TypeError: Result of expression 'this.$.focus' [undefined] is not a function” -或者- “TypeError: Result of expression 'this.document.getWindow() .$' [undefined] 不是一个对象”。你在哪里/什么时候调用那个函数？我的脚本与 jquery 加载的内容内联。(ckeditor.js 在父 html 的头部)
2021-05-01 05:11:10
我在所有 textarea 都添加到页面并填充内容之后调用它。
2021-05-10 05:11:10
其它你可能感兴趣的问题
上一篇在 jQuery 中获取一个列表元素内容数组 下一篇Chrome 中的“Access-Control-Allow-Origin 不允许 Origin null”。为什么？