javascript - CKEditor 实例已经存在

Question

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

当用户取消对话框时，我将删除内容，以便在以后的请求中重新加载它们。问题是，一旦重新加载对话框，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()”上。有没有人经历过这个并找到了不同的解决方案？

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

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

score 104 · Accepted Answer

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

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

score 28 · Accepted Answer

function loadEditor(id)
{
    var instance = CKEDITOR.instances[id];
    if(instance)
    {
        CKEDITOR.remove(instance);
    }
    CKEDITOR.replace(id);
}

score 19 · Accepted Answer

我也遇到了这个问题，但是我以更简单的方式解决了它...

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

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

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

score 11 · Accepted Answer

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

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

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

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

score 7 · Accepted Answer

也许这会对你有所帮助——我已经使用 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() 是内部的，并且在某一时刻被错误地记录在案。

score 6 · Accepted Answer

6

var e= CKEDITOR.instances['sample'];
e.destroy();
e= null;

于 2009-12-14T14:22:26.320 回答

score 5 · Accepted Answer

对于 ajax 请求，

 for(k in CKEDITOR.instances){
    var instance = CKEDITOR.instances[k];
    instance.destroy()
 }
  CKEDITOR.replaceAll();

此剪辑从文档中删除所有实例。然后创建新实例。

score 5 · Accepted Answer

我遇到过类似的问题，我们为通过 ajax 加载的内容制作了几个 CKeditor 实例。

CKEDITOR.remove()

将 DOM 保留在内存中，并没有删除所有绑定。

CKEDITOR.instance[instance_id].destroy()

每当我使用来自 ajax 的新数据创建新实例时，都会出现错误i.contentWindow错误。但这只是直到我发现在清除 DOM 后我正在销毁实例。

在页面上存在实例及其 DOM 时使用destroy()，然后它可以正常工作。

score 3 · Accepted Answer

i.contentWindow is null在绑定到不再位于 DOM 中的 textarea 的编辑器实例上调用 destroy 时，似乎会发生该错误。

CKEDITORY.destroy接受一个参数noUpdate。

APIdoc 指出：

如果实例正在替换 DOM 元素，则此参数指示是否使用实例内容更新元素。

因此，为了避免错误，要么在从 DOM 中删除 textarea 元素之前调用 destroy，要么调用 destory(true) 以避免尝试更新不存在的 DOM 元素。

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

（使用 3.6.2 版本和 jQuery 适配器）

score 3 · Accepted Answer

3

这对我有用：

for(name in CKEDITOR.instances)
{
  CKEDITOR.instances[name].destroy()
}

于 2013-08-09T14:10:48.103 回答

score 2 · Accepted Answer

我已经根据上述所有代码准备了自己的解决方案。

      $("textarea.ckeditor")
      .each(function () {

                var editorId = $(this).attr("id");

                try {    
                    var instance = CKEDITOR.instances[editorId];
                    if (instance) { instance.destroy(true); }

                }
                catch(e) {}
                finally {
                    CKEDITOR.replace(editorId);
                }
            });

它非常适合我。

有时在 AJAX 请求之后有错误的 DOM 结构。例如：

<div id="result">
   <div id="result>
   //CONTENT
   </div>
</div>

这也会导致问题，并且 ckEditor 将不起作用。因此，请确保您具有正确的 DOM 结构。

score 2 · Accepted Answer

CKEDITOR.instances = new Array();

我在调用创建实例（每页加载一个）之前使用它。不知道这会如何影响内存处理以及什么不会。这仅在您想替换页面上的所有实例时才有效。

score 2 · Accepted Answer

我对实例有同样的问题，我到处寻找，最后这个实现对我有用：



    //set my instance id on a variable

    myinstance = CKEDITOR.instances['info'];

    //check if my instance already exist

    if (myinstance) { 
        CKEDITOR.remove(info)
    }

    //call ckeditor again

    $('#info').ckeditor({
        toolbar: 'Basic',
        entities: false,
        basicEntities: false
    });

score 2 · Accepted Answer

您可以通过 ckeditor 的 remove 方法删除任何 ckeditor 实例。实例将是文本区域的 ID 或名称。

if (CKEDITOR.instances[instance_name]) {
    CKEDITOR.remove(CKEDITOR.instances[instance_name]);
}

score 1 · Accepted Answer

Indeed, removing the ".ckeditor" class from your code solves the issue. Most of us followed the jQuery integration example from the ckeditor's documentation:

$('.jquery_ckeditor')
.ckeditor( function() { /* callback code */ }, { skin : 'office2003' } );

and thought "... maybe I can just get rid or the '.jquery_' part".

I've been wasting my time tweaking the callback function (because the {skin:'office2003'} actually worked), while the problem was coming from elsewhere.

I think the documentation should mention that the use of "ckeditor" as a class name is not recommended, because it is a reserved keyword.

Cheers.

score 1 · Accepted Answer

我处于必须控制生成对话框的情况，每个对话框都需要在这些对话框中嵌入一个ckeditor。碰巧文本区域共享相同的ID。（通常这是非常糟糕的做法，但我有 2 个 jqGrid，一个已分配项，另一个未分配项。）它们共享几乎相同的配置。因此，我使用通用代码来配置两者。

因此，当我从任一 jqGrid 加载对话框、添加行或编辑它们时；我必须删除所有文本区域中的所有 CKEDITOR 实例。

$('textarea').each(function()
{
    try 
    {
        if(CKEDITOR.instances[$(this)[0].id] != null)
        {
            CKEDITOR.instances[$(this)[0].id].destroy();
        }
    }
    catch(e)
    {

    }
});

这将遍历所有文本区域，如果有 CKEDITOR 实例，则将其销毁。

或者，如果您使用纯 jQuery：

$('textarea').each(function()
{
    try 
    {
        $(this).ckeditorGet().destroy();
    }
    catch(e)
    {

    }
});

score 1 · Accepted Answer

我对 jQuery Dialog 也有同样的问题。

如果您只想删除以前的数据，为什么要销毁实例？

function clearEditor(id)
{
  var instance = CKEDITOR.instances[id];
  if(instance)
  {
    instance.setData( '' );
  }
}

score 1 · Accepted Answer

我选择重命名所有实例而不是销毁/替换 - 因为有时加载 AJAX 的实例并没有真正替换页面核心上的实例……在 RAM 中保留更多，但这样的冲突更少。

    if (CKEDITOR && CKEDITOR.instances) {
        for (var oldName in CKEDITOR.instances) {
            var newName = "ajax"+oldName;
            CKEDITOR.instances[newName] = CKEDITOR.instances[oldName];
            CKEDITOR.instances[newName].name = newName;
            delete CKEDITOR.instances[oldName];
        }
    }

score 1 · Accepted Answer

1

remove class="ckeditor"，它可能触发了 ckeditor 初始化

于 2014-04-28T10:06:49.573 回答

score 1 · Accepted Answer

我了解到

删除 CKEDITOR.instances[editorName];

就其本身而言，实际上删除了该实例。我读过和看到的所有其他方法，包括在 stackoverflow 上从用户那里找到的方法，都对我不起作用。

在我的情况下，我使用 ajax 调用来提取包裹在 and 周围的内容的副本。问题恰好是因为我正在使用 jQuery .live 事件来绑定“编辑此文档”链接，然后在 ajax 加载成功后应用 ckeditor 实例。这意味着，当我单击另一个链接与另一个 .live 事件的链接时，我必须使用删除 CKEDITOR.instances[editorName] 作为我清除内容窗口（持有表单）任务的一部分，然后重新获取持有的内容在数据库或其他资源中。

score 0 · Accepted Answer

我遇到了和jackboberg一样的问题。我正在使用动态表单加载到 jquery 对话框中，然后附加各种小部件（日期选择器、ckeditors 等......）。我尝试了上面提到的所有解决方案，但没有一个对我有用。

出于某种原因，ckeditor 仅在我第一次加载表单时附加，第二次我收到与 jackboberg 完全相同的错误消息。

我分析了我的代码，发现如果您在“半空中”附加 ckeditor，即表单内容仍未放入对话框中，ckeditor 将无法正确附加其绑定。那是因为 ckeditor 附加在“空中”，第二次将其附加在“空中”......噗......由于第一个实例没有从 DOM 中正确删除，因此引发错误。

这是我导致错误的代码：

var $content = $(r.content); // jQuery can create DOM nodes from html text gotten from <xhr response> - so called "mid-air" DOM creation
$('.rte-field',$content).ckeditor(function(){});
$content.dialog();

这是有效的修复：

var $content = $(r.content).dialog(); // first create dialog
$('.rte-field',$content).ckeditor(function(){}); // then attach ckeditor widget

score 0 · Accepted Answer

CKeditor 4.2.1

这里有很多答案，但对我来说，我需要更多的东西（也有点脏，所以如果有人可以改进，请做）。对我来说，我的问题所在的模式。

我正在使用 Foundation 以模式渲染 CKEditor。理想情况下，我会在关闭时破坏编辑器，但是我不想惹基金会。

我打电话给删除，我尝试了删除和另一种方法，但这就是我最终解决的问题。

我使用 textarea 来填充不是 DIV。

我的解决方案

//hard code the DIV removal (due to duplication of CKeditors on page however they didn't work)

    $("#cke_myckeditorname").remove();


     if (CKEDITOR.instances['myckeditorname']) {
                delete CKEDITOR.instances['myckeditorname'];
                CKEDITOR.replace('myckeditorname', GetCKEditorSettings());
            } else {
                CKEDITOR.replace('myckeditorname', GetCKEditorSettings());
            }

这是我返回您可能不想要的特定格式的方法。

    function GetCKEditorSettings()
    {
       return {
                    linkShowAdvancedTab: false,
                    linkShowTargetTab: false,
                    removePlugins: 'elementspath,magicline',
                    extraAllowedContent: 'hr blockquote div',
                    fontSize_sizes: 'small/8px;normal/12px;large/16px;larger/24px;huge/36px;',
                    toolbar: [
                        ['FontSize'],
                        ['Bold', 'Italic', 'Underline', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],
                        ['Smiley']
                    ]
                };
    }

score 0 · Accepted Answer

我遇到了同样的问题，我收到了一个空引用异常，并且“空”这个词将显示在编辑器中。我尝试了一些解决方案，包括将编辑器升级到 3.4.1 无济于事。

我最终不得不编辑源代码。在 _source\plugins\wysiwygarea\plugin.js 中大约第 416 到 426 行，有一个这样的片段：

iframe = CKEDITOR.dom.element.createFromHtml( '&lt;iframe' + ... + '></iframe>' );

至少在 FF 中，iframe 并没有在需要的时候完全实例化。在该行之后，我用 setTimeout 函数包围了函数的其余部分：

iframe = CKEDITOR.dom.element.createFromHtml( '<iframe' + ... + '></iframe>' );
setTimeout(function()
{ 
    // Running inside of Firefox chrome the load event doesn't bubble like in a normal page (#5689)
    ...
}, 1000);

};

// The script that launches the bootstrap logic on 'domReady', so the document
...

文本现在在模式对话框中一致呈现。

score 0 · Accepted Answer

这是 jquery .load() api 和 ckeditor 的完整工作代码，在我的情况下，我将带有 ckeditor 的页面加载到具有一些 jquery 效果的 div 中。我希望它会帮助你。

 $(function() {
            runEffect = function(fileload,lessonid,act) {
            var selectedEffect = 'drop';
            var options = {};
            $( "#effect" ).effect( selectedEffect, options, 200, callback(fileload,lessonid,act) );
        };
        function callback(fileload,lessonid,act) {
            setTimeout(function() {//load the page in effect div
                $( "#effect" ).load(fileload,{lessonid:lessonid,act:act});
                 $("#effect").show( "drop", 
                          {direction: "right"}, 200 );
                $("#effect").ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {
                    loadCKeditor(); //call the function after loading page
                });
            }, 100 );   
        };

        function loadCKeditor()
        {//you need to destroy  the instance if already exist
            if (CKEDITOR.instances['introduction']) 
            {
                CKEDITOR.instances['introduction'].destroy();
            }
            CKEDITOR.replace('introduction').getSelection().getSelectedText();
        }
    });

===================== button for call the function ================================

<input type="button" name="button" id="button" onclick="runEffect('lesson.php','','add')" >

score 0 · Accepted Answer

此功能在 CKEditor 4.4.5 版中适用于我，它没有任何内存泄漏

 function CKEditor_Render(CkEditor_id) {
        var instance = CKEDITOR.instances[CkEditor_id];
        if (CKEDITOR.instances.instance) {
            CKEDITOR.instances.instance.destroy();
        }
        CKEDITOR.replace(CkEditor_id);
    }

// 调用这个函数如下

var id = 'ckeditor'; // Id of your textarea

CKEditor_Render(id);

score 0 · Accepted Answer

对于那些使用jquery“适配器”并且遇到麻烦（就像我一样）的人，因为超级hackish但有效的解决方案是做这样的事情：

// content editor plugin
(function($){
    $.fn.contentEditor = function( params ) {
        var xParams = $.extend({}, $.fn.contentEditor.defaultParams, params);
        return this.each( function() {   
            var $editor = $(this);
            var $params = $.extend({}, xParams, $editor.data());

            // if identifier is set, detect type based on identifier in $editor
            if( $params.identifier.type ) {
                $params.type = $editor.find($params.identifier.type).val();
            }

            $editor.data('type', $params.type);

            // edit functionality
            editButton = $('<button>Edit Content</button>').on('click',function(){
                // content container
                var $cc = $('#' + $editor.data('type'));

                // editor window
                var $ew = $('<form class="editorWindow" />');
                $ew.appendTo('body');

                // editor content
                $ec = $('<textarea name="editorContent" />').val($cc.html());
                $ec.appendTo($ew);
                $ec.ckeditor();


                //$ec.ckeditorGet().setMode('source');


                $ew.dialog({
                    "autoOpen": true,
                    "modal": true,
                    "draggable": false,
                    "resizable": false,
                    "width": 850,
                    "height": 'auto',
                    "title": "Content Editor",
                    "buttons": { 
                        'Save': function() {                            
                            $cc.html( $ec.val() );
                            $ec.ckeditorGet().destroy(); 
                            $ew.remove();
                        },
                        'Cancel / Close': function() { 

                            $ec.ckeditorGet().destroy();                        
                            $ew.remove();
                        }
                    },
                    'close': function() {
                        $ec.ckeditorGet().destroy(); 
                    },
                    'open': function() {
                        $ew.find('a.cke_button_source').click();

                        setTimeout(function(){
                            $ew.find('a.cke_button_source.cke_on').click();
                        }, 500);
                    }
                });

                return false;
            });

            editButton.appendTo( $editor );

        });
    }

    // set default option values
    $.fn.contentEditor.defaultParams = {
        'identifier': {
            'type': 'input[name="type"]'
        }
    };   

})(jQuery);   

$(function(){

    $('form.contentEditor').contentEditor();

});

关键是这部分：

                'open': function() {
                    $ew.find('a.cke_button_source').click();

                    setTimeout(function(){
                        $ew.find('a.cke_button_source.cke_on').click();
                    }, 500);
                }

这解决了下次打开对话框时编辑器文本不可见的问题。我意识到这是非常骇人听闻的，但考虑到其中大部分将用于管理工具，我认为这不像通常那样是一个大问题......而且这很有效，所以希望它可以为某人节省一些时间 ;）

score 0 · Accepted Answer

它很简单。就我而言，我运行了下面的 jquery 方法，该方法将在页面加载期间破坏 ckeditor 实例。这成功了并解决了问题 -

jQuery 方法 -

function resetCkEditorsOnLoad(){

    for(var i in CKEDITOR.instances) {
        editor = CKEDITOR.instances[i];
            editor.destroy();
            editor = null;
    }
}

$(function() {

            $(".form-button").button();
    $(".button").button();

    resetCkEditorsOnLoad(); // CALLING THE METHOD DURING THE PAGE LOAD

            .... blah.. blah.. blah.... // REST OF YOUR BUSINESS LOGIC GOES HERE

       });

而已。我希望它对你有帮助。

干杯，西里什。

score 0 · Accepted Answer

我遇到了同样的事情，问题是 wordcount 插件的初始化时间太长。30 多秒。用户将单击显示 ckeditor 的视图，然后取消，从而将新页面 ajax 加载到 dom 中。该插件抱怨，因为 iframe 或任何 contentWindow 指向的内容在它准备好将自己添加到 contentWindow 时不再可见。您可以通过单击视图然后等待字数出现在编辑器的右下角来验证这一点。如果你现在取消，你不会有问题。如果你不等待它，你会得到 i.contentWindow is null 错误。要修复它，只需废弃插件：

if (CKEDITOR.instances['textarea_name']) 
{
   CKEDITOR.instances['textarea_name'].destroy();
}
CKEDITOR.replace('textarea_name', { removePlugins: "wordcount" } );

如果您需要单词计数器，请在编辑器上注册粘贴和 keyup 事件，并使用计算单词的功能。

score 0 · Accepted Answer

为了支持动态（Ajax）加载表单（之间没有页面刷新），其中包含具有相同（再次调用相同表单）或不同 ID（以前卸载的表单）的文本区域并将它们转换为 CKEditor 元素，我做了以下操作（使用 JQuery适配器）：

在页面完成每个传递要转换的文本区域的 Ajax 调用后，我调用以下函数：

setupCKeditor()

这看起来像这样（它假设您的 textareas 要转换为 RTE 具有class="yourCKClass"）：

    /* Turns textAreas into TinyMCE Rich Text Editors where
 * class: tinymce applied to textarea.
 */
function setupCKeditor(){

    // define editor configuration      
    var config = {skin : 'kama'};

    // Remove and recreate any existing CKEditor instances
    var count = 0;
    if (CKEDITOR.instances !== 'undefined') {
        for(var i in CKEDITOR.instances) {

            var oEditor   = CKEDITOR.instances[i];
            var editorName = oEditor.name;

             // Get the editor data.
            var data = $('#'+editorName).val();

            // Check if current instance in loop is the same as the textarea on current page
            if ($('textarea.yourCKClass').attr('id') == editorName) {
                if(CKEDITOR.instances[editorName]) {

                    // delete and recreate the editor
                    delete CKEDITOR.instances[editorName];
                    $('#'+editorName).ckeditor(function() { },config);
                    count++;

                }
            }   


        }
    }

    // If no editor's exist in the DOM, create any that are needed.             
    if (count == 0){

        $('textarea.yourCKClass').each( function(index) {

                var editorName = $(this).attr('id');
                $('#'+editorName).ckeditor(function() { $('#'+editorName).val(data); },config);

            });

    }


}

我应该提到这一行：

$('#'+editorName).ckeditor(function() { $('#'+editorName).val(data); },config);

可以（并且应该）很简单：

$('#'+editorName).ckeditor(function() { },config);

但是我发现编辑器通常会在加载后显示正确的内容一秒钟，然后它们会清空所需内容的编辑器。因此，带有回调代码的那一行会强制 CKEditor 内容与原始 textarea 内容相同。使用时会导致闪烁。如果可以避免使用它，请这样做..

score 0 · Accepted Answer

0

尝试这个：

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

于 2016-03-05T10:26:27.513 回答

score -1 · Accepted Answer

您不需要销毁对象 CKeditor，您需要 remove() ：

改变这个：

CKEDITOR.instances['textarea_name'].destroy();

为了那个原因：

CKEDITOR.remove(CKEDITOR.instances['textarea_name']);

score -1 · Accepted Answer

如果您知道编辑器的名称，那么执行此操作非常简单..

例如，如果编辑器的名称是，editor1 (this is the id of div or textarea)那么您只需像这样检查

if(CKEDITOR.instances['editor1']){
   // Instance present
}else{
   // Instance not present 
}

如果您想获取已初始化编辑器的数量，请执行以下操作

for(let inst of CKEDITOR.instances){
   // inst is an Obj of editor instance
   // inst.name will give the name of the editor instance
}

javascript - CKEditor 实例已经存在

32 回答 32

Related

Reference