Javascript CKEditor实例已存在_Javascript_Ckeditor

Javascript CKEditor实例已存在

javascript ckeditor

Javascript CKEditor实例已存在,javascript,ckeditor,Javascript,Ckeditor,我使用jquery对话框来呈现表单（通过AJAX获取）。在某些表单上，我使用CKEditor来编辑文本区域。编辑器在第一次加载时显示良好当用户取消对话框时，我将删除内容，以便在以后的请求中重新加载内容。问题是，一旦重新加载对话框，CKEditor就会声称编辑器已经存在 uncaught exception: [CKEDITOR.editor] The instance "textarea_name" already exists. API包括一种销毁现有编辑器的方法，我看到有人声称这是一种解

我使用jquery对话框来呈现表单（通过AJAX获取）。在某些表单上，我使用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（）”上。有没有人经历过这种情况并找到了不同的解决方案

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

已更新

处理相同的问题，但他提供了一个。

也许这会帮助您-我使用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（）是内部的，有一点记录不正确。

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

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

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

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

destroy（）和remove（）对我不起作用。

我也有这个问题，但我用一种更简单的方法解决了它

我在jQuery脚本中使用类“ckeditor”作为选择器，我希望为ckeditor使用哪些文本区域。默认的ckeditor JS脚本也使用此类来标识ckeditor要使用的文本区域

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

我只是将textarea的类和我的jQuery脚本更改为“do_ckeditor”（您可以使用除“ckeditor”之外的任何东西），它就工作了。

事实上，从代码中删除“.ckeditor”类就解决了这个问题。我们大多数人都遵循了ckeditor文档中的jQuery集成示例：

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

然后想，“…也许我可以摆脱这个“.jquery”部分”

我一直在浪费时间调整回调函数（因为{skin:'office2003'}实际上起了作用），而问题来自其他地方

我认为文档应该提到，不建议使用“ckeditor”作为类名，因为它是一个保留关键字

干杯。

我遇到了同样的问题，我收到了一个空引用异常，编辑器中将显示“空”一词。我尝试了一些解决方案，包括将编辑器升级到3.4.1，但都没有成功

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

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

// 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();

});

iframe=CKEDITOR.dom.element.createFromHtml（'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
...

setupCKeditor()

iframe=CKEDITOR.dom.element.createFromHtml（“”）；
setTimeout（函数（）
{ 
//在Firefox chrome内部运行加载事件不会像普通页面中那样冒泡（#5689）
...
}, 1000);
};
//在“domReady”上启动引导逻辑的脚本，因此
...

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

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

CKEDITOR.remove（）

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

CKEDITOR.instance[instance_id].destroy（）

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

当实例及其DOM出现在页面上时，使用destroy（），那么它就可以正常工作。

我了解到了这一点

删除CKEDITOR.instances[editorName]

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

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

要使其正常工作，您需要在销毁实例时传递布尔参数true：

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

我在jQuery对话框中遇到了同样的问题

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

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

我选择重命名所有实例，而不是销毁/替换-因为有时候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];
        }
    }

对于ajax请求

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

这将删除文档中的所有实例。然后创建新实例。

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

在页面完成每个Ajax调用后，该调用将传递一个要转换的textarea

    /* 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.instances = new Array();

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

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

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

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

    }
});

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

    }
});

      $("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);
                }
            });

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

// 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);
                }



    //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
    });

 $(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')" >

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

       });

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

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

 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);

//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']
                    ]
                };
    }

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