Экземпляр CKEditor уже существует

Я использую диалоги 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 ()». Кто-нибудь испытал это и нашел другое решение?

Можно ли «перерисовать» существующий редактор вместо его уничтожения и замены?

ОБНОВЛЕНО Вот еще один вопрос, связанный с той же проблемой, но он предоставил загружаемый тестовый пример .

Чтобы это сработало, вам нужно передать логический параметр true при уничтожении экземпляра:

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

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

У меня тоже была эта проблема, но я решил ее гораздо проще ...

Я использовал класс ckeditor в моем сценарии jQuery в качестве селектора текстовых полей, которые я хотел использовать для CKEditor. JS-скрипт ckeditor по умолчанию также использует этот класс, чтобы определить, какие текстовые поля использовать для CKEditor.

Это означало конфликт между моим скриптом jQuery и скриптом ckeditor по умолчанию.

Я просто изменил класс текстовой области и моего сценария jQuery на do_ckeditor (вы можете использовать что угодно, кроме ckeditor), и это сработало.

Это самое простое (и единственное) решение, которое сработало для меня:

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

Удаление этой записи в массиве не позволит этой проверке безопасности формы разрушить ваше приложение.

destroy () и remove () у меня не работали.

Возможно, это поможет вам - я сделал нечто подобное с помощью 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 () должен быть внутренним и некогда был неправильно задокументирован.

У меня была аналогичная проблема, когда мы делали несколько экземпляров CKeditor для контента, загружаемого через ajax.

CKEDITOR.remove ()

Сохранял DOM в памяти и не удалял все привязки.

CKEDITOR.instance [instance_id] .destroy ()

Выдал ошибку i.contentWindow, когда я создаю новый экземпляр с новыми данными из ajax. Но это было только до тех пор, пока я не понял, что уничтожаю экземпляр после очистки DOM.

Используйте destroy (), пока экземпляр и его DOM присутствуют на странице, тогда он работает отлично.

Для запросов ajax,

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

этот фрагмент удаляет все экземпляры из документа. Затем создает новые экземпляры.

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

В i.contentWindow is nullОшибка , кажется, происходит при вызове уничтожить на экземпляре редактора , который был привязан к текстовому полю больше не в DOM.

CKEDITORY.destroy принимает параметр noUpdate .

В APIdoc говорится:

Если экземпляр заменяет элемент DOM, этот параметр указывает, обновлять ли элемент содержимым экземпляра.

Итак, чтобы избежать ошибки, либо вызовите destroy перед удалением элемента textarea из DOM, либо вызовите destory (true), чтобы не пытаться обновить несуществующий элемент DOM.

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

(с использованием версии 3.6.2 с адаптером jQuery)

Вот что сработало для меня:

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

CKEDITOR.instances = new Array();

Я использую это перед вызовами для создания экземпляра (на каждую загрузку страницы). Не уверен, как это влияет на обработку памяти, а что нет. Это сработает, только если вы захотите заменить все экземпляры на странице.

Я подготовил собственное решение на основе всех приведенных выше кодов.

      $("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. Для Instace:

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

Это также вызовет проблему, и ckEditor не будет работать. Поэтому убедитесь, что у вас правильная структура DOM.

У меня была такая же проблема с экземплярами, я искал везде, и, наконец, эта реализация у меня работает:

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

Вы можете удалить любой экземпляр ckeditor с помощью метода remove ckeditor. Экземпляр будет идентификатором или именем текстового поля.

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

Действительно, удаление класса ".ckeditor" из вашего кода решает проблему. Большинство из нас следовали примеру интеграции jQuery из документации ckeditor:

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

и подумал: «... может я просто избавлюсь от части '.jquery_'».

Я зря тратил время на настройку функции обратного вызова (потому что {skin: 'office2003'} действительно работал), в то время как проблема исходила откуда-то еще.

Я думаю, что в документации следует упомянуть, что использование ckeditor в качестве имени класса не рекомендуется, поскольку это зарезервированное ключевое слово.

Ура.

я узнал, что

удалить CKEDITOR.instances [имя редактора];

сам по себе, фактически удалил экземпляр. ВСЕ другие методы, которые я читал и видел, включая то, что было найдено здесь в stackoverflow от его пользователей, у меня не работали.

В моей ситуации я использую вызов ajax для извлечения копии содержимого, обернутого вокруг и. Проблема заключается в том, что я использую событие jQuery .live для привязки ссылки «Изменить этот документ», а затем применяю экземпляр ckeditor после успешной загрузки ajax. Это означает, что когда я нажимаю другую ссылку на ссылку с другим событием .live, я должен использовать удаление CKEDITOR.instances [editorName] как часть моей задачи по очистке окна содержимого (содержащего форму), а затем повторного извлечения содержимого, удерживаемого в базе данных или другом ресурсе.

У меня была такая же проблема с диалогом jQuery.

Зачем уничтожать экземпляр, если вы просто хотите удалить предыдущие данные?

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

Я решил переименовать все экземпляры вместо уничтожения / замены - поскольку иногда загруженный AJAX экземпляр на самом деле не заменяет тот, который находится в ядре страницы ... таким образом сохраняет больше в ОЗУ, но меньше конфликтов.

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

Я нахожусь в ситуации, когда мне нужно управлять этими диалоговыми окнами, каждый из которых должен иметь встроенный в эти диалоги ckeditor. И так уж получилось, что текстовые области имеют один и тот же идентификатор. (обычно это очень плохая практика, но у меня есть 2 jqGrids, один из назначенных элементов, а другой из неназначенных элементов.) Они имеют почти идентичную конфигурацию. Таким образом, я использую общий код для настройки обоих.

Итак, когда я загружаю диалог для добавления строк или для их редактирования, либо из 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)
    {

    }
});

удалить class="ckeditor", это могло вызвать инициализацию ckeditor

У меня была такая же проблема, когда я получал исключение нулевой ссылки, и в редакторе отображалось слово «null». Я пробовал несколько решений, включая обновление редактора до 3.4.1, но безрезультатно.

В итоге мне пришлось редактировать источник. Примерно в строке с 416 по 426 в _source \ plugins \ wysiwygarea \ plugin.js есть такой фрагмент:

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
...

Текст теперь отображается последовательно в модальных диалогах.

Чтобы поддерживать динамическую (Ajax) загрузку форм (без обновления страницы между ними), которые содержат текстовые поля с одинаковыми (одна и та же форма вызывается снова) или разными идентификаторами (ранее выгруженная форма) и преобразовать их в элементы CKEditor, я сделал следующее (используя JQuery адаптер):

После того, как страница завершила каждый вызов Ajax, доставляющий текстовое поле для преобразования, я вызываю следующую функцию:

setupCKeditor()

Это выглядит так (предполагается, что ваши текстовые поля будут преобразованы в 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 быть таким же, как исходное содержимое текстового поля. При использовании вызывает мерцание. Если вы можете избежать его использования, сделайте это ..

У меня была точно такая же проблема, как и у Джекбоберга. Я использовал динамическую загрузку формы в диалоги 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

Я столкнулся с тем же самым, и проблема заключалась в том, что плагин 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" } );

Если вам нужен счетчик слов, зарегистрируйтесь для событий вставки и нажатия клавиш в редакторе с помощью функции, которая считает слова.

Для тех, кто использует «адаптер» jquery и у которых возникли проблемы (как и я), супер хакерское, но работающее решение - это сделать что-то вроде этого:

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

Это устраняет проблему, при которой текст редактора не отображается при следующем открытии диалогового окна. Я понимаю, что это очень хакерский подход, но, учитывая, что большинство из них будет использоваться для инструментов администратора, я не думаю, что это такая большая проблема, как обычно ... и это работает, так что, надеюсь, это спасет кого-то время;)

Это полностью рабочий код для jquery .load () api и ckeditor, в моем случае я загружаю страницу с ckeditor в div с некоторыми эффектами jquery. Надеюсь, это вам поможет.

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

Это довольно просто. В моем случае я запустил приведенный ниже метод 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

       });

Вот и все. Надеюсь, это вам поможет.

Привет, Сириш.

У меня эта функция работает в 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);

CKeditor 4.2.1

Здесь много ответов, но мне нужно было что-то большее (тоже немного грязное, так что если кто-то может улучшить, сделайте это). Для меня МОДАЛЫ, где моя проблема.

Я рендерил CKEditor в модальном режиме, используя Foundation. В идеале я бы уничтожил редактор сразу после закрытия, но я не хотел связываться с Фондом.

Я вызвал удаление, я попробовал удалить и другой метод, но это было то, с чем я наконец остановился.

Я использовал 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']
                    ]
                };
    }

Попробуй это:

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