javascript CKEditor - 当 DOM 节点被删除时销毁一个实例

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7962007/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 01:52:41  来源:igfitidea点击:

CKEditor - destroy an instance when the DOM node has been deleted

javascriptajaxckeditorwysiwyg

提问by Joseph Silber

Reading through the CKEditor documentation, I see that they have an option to destroy an instance with CKEDITOR.instances.instanceName.destroy();. However, if the DOM has changed, and the whole WYSIWYG DOM structure has been removed, I get the following error in Chrome:

通过阅读CKEditor的文档,我看到他们有一个选项,以摧毁一个实例CKEDITOR.instances.instanceName.destroy();。但是,如果 DOM 已更改,并且整个 WYSIWYG DOM 结构已被删除,我会在 Chrome 中收到以下错误:

Uncaught TypeError: Cannot read property 'document' of null

...and the following one in Firefox:

...以及 Firefox 中的以下内容:

i.contentWindow is null

Is there any way to work around this?

有没有办法解决这个问题?

Due to the way my app is structured (loading content via AJAX), I cannot call .destroy()when the elements are still on the page.

由于我的应用程序的结构方式(通过 AJAX 加载内容),.destroy()当元素仍在页面上时我无法调用。

回答by Erik ?erpnjak

If you need to destroy the ckeditor object and the elemnets in the DOM AFTER an AJAX call, you can do it by setting a boolean parameter to the function call destroy(true). This way it wont try to update the DOM:

如果您需要在 AJAX 调用后销毁 ckeditor 对象和 DOM 中的元素,您可以通过为函数调用 destroy(true) 设置一个布尔参数来实现。这样它就不会尝试更新 DOM:

var editor = CKEDITOR.instances[name];
if (editor) { editor.destroy(true); }
CKEDITOR.replace(name);

I have wrote 2 functions to be able to control these things a bit better. Notice that I have declared a variable before these functions can be used, but there are much slicker ways, but this approach was good enough for the purpose I needed it(I use and need only one instance):

我编写了 2 个函数来更好地控制这些事情。请注意,在可以使用这些函数之前,我已经声明了一个变量,但是有很多更巧妙的方法,但是这种方法对于我需要的目的来说已经足够好了(我使用并且只需要一个实例):

    if(typeof(editor) == 'undefined')
        var editor=null;

    function ck_delete(editor)
    {
        if(typeof(editor) != 'undefined' && editor!=null)
            editor.destroy();
    }

    function ck_init(ck_inst_name)
    {
        var el_id=document.getElementById(ck_inst_name);
        if(typeof(el_id) != 'undefined' && el_id!=null)
        {
            if(typeof(editor) == 'undefined' || editor==null)
            {
                editor=CKEDITOR.replace( ck_inst_name );
            }
            else
            {
                ck_delete(editor);
                editor=null;
                editor = CKEDITOR.replace( ck_inst_name );
            }
        }
    }

I also check if a HTML element that should be replaced exists so I dont get an error message.

我还检查是否存在应该替换的 HTML 元素,因此我不会收到错误消息。

回答by AlfonsoML

You can apply one of the patches at http://dev.ckeditor.com/ticket/8226and it will work. I suggest this one: http://dev.ckeditor.com/attachment/ticket/8226/8226_5.patch

您可以在http://dev.ckeditor.com/ticket/8226应用补丁之一,它会起作用。我推荐这个:http: //dev.ckeditor.com/attachment/ticket/8226/8226_5.patch

回答by eon

We had this problem integrating CKEDITOR in GWT, in a popup dialog. When the dialog was destroyed, CKEDITOR raised this error - "Cannot read property 'document' of null." The solution was to destroy CKEDITOR before closing the dialog. (We had to extend the GWT ckeditor class in order to override this - using the editor.destroy(true) syntax given by Erik - Thanks, Erik!)

我们在弹出对话框中在 GWT 中集成 CKEDITOR 时遇到了这个问题。当对话框被销毁时,CKEDITOR 引发了这个错误——“无法读取 null 的属性‘文档’。” 解决方案是在关闭对话框之前销毁 CKEDITOR。(我们必须扩展 GWT ckeditor 类以覆盖它 - 使用 Erik 给出的 editor.destroy(true) 语法 - 谢谢,Erik!)