Примірник 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.

Здається, ця помилка виникає на "знищити ()", а не на "замінити ()". Хтось із цим переживав і знайшов інше рішення?

Чи можливо "повторно відтворити" існуючий редактор, а не знищити та замінити його?

ОНОВЛЕНО Ось ще одне питання, що стосується тієї ж проблеми, але він запропонував тестовий зразок, який можна завантажити .

Для цього вам потрібно передати булевий параметр 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 JS також використовує цей клас, щоб визначити, які текстові області використовувати для CKEditor.

Це означало, що існує конфлікт між моїм сценарієм jQuery і сценарієм ckeditor за замовчуванням.

Я просто змінив клас textarea та мого сценарію jQuery на 'do_ckeditor' (ви можете використовувати все, крім "ckeditor"), і він працював.

Це найпростіше (і єдине) рішення, яке працювало для мене:

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

Видалення цього запису в масиві запобігає знищенню вашої програми перевірки безпеки форми.

знищити () і видалити () не працювало для мене.

Можливо, це вам допоможе - я зробив щось подібне за допомогою 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.

Використовуйте знищити (), коли екземпляр & його 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, цей параметр вказує, чи слід оновити елемент вмістом екземпляра.

Отже, щоб уникнути помилки, або виклик знищити перед тим, як видалити елемент textarea з DOM, або домену виклику (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. Для встановлення:

<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, видаливши метод ckeditor. Примірник буде ідентифікатором або назвою textarea.

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.instance [editorName];

сам по собі фактично видалив екземпляр. ВСІ інші методи, які я читав і бачив, включаючи те, що було знайдено тут у stackoverflow від його користувачів, не працювали для мене.

У моїй ситуації я використовую ajax-дзвінок, щоб витягнути копію вмісту, обернутого навколо та. Проблема виникає через те, що я використовую подію jQuery .live, щоб зв’язати посилання "Редагувати цей документ", а потім застосувати екземпляр ckeditor після успіху завантаження ajax. Це означає, що коли я натискаю інше посилання на іншу подію .live, я повинен використовувати видалити CKEDITOR.instance [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 - нульова помилка. Щоб виправити це, просто виберіть плагін:

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

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

Для тих, хто використовує jquery "adapter" і має проблеми (як я), як супер хакіз, але робоче рішення - зробити щось подібне:

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

       });

Це воно. Я сподіваюся, що це вам допоможе.

Ура, Сіріш.

Ця функція працює для мене у версії 4.4.5 CKEditor, вона не має витоків пам'яті

 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. В ідеалі я б задумав редактора після закриття, проте я не хотів возитися з Foundation.

Я закликав delete, я спробував видалити і інший метод, але це було те, з чим я нарешті вирішився.

Я використовував textarea для заповнення не DIVs.

Моє рішення

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