Instancja CKEditor już istnieje

99

Używam okien dialogowych jQuery do prezentowania formularzy (pobieranych przez AJAX). W niektórych formularzach używam CKEditor dla obszarów tekstowych. Edytor wyświetla się dobrze przy pierwszym załadowaniu.

Kiedy użytkownik anuluje okno dialogowe, usuwam zawartość, aby została załadowana na nowo na późniejsze żądanie. Problem polega na tym, że po ponownym załadowaniu okna dialogowego CKEditor twierdzi, że edytor już istnieje.

uncaught exception: [CKEDITOR.editor] The instance "textarea_name" already exists.

API zawiera metodę niszczenia istniejących edytorów i widziałem ludzi twierdzących, że jest to rozwiązanie:

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

U mnie to nie działa, ponieważ zamiast tego pojawia się nowy błąd:

TypeError: Result of expression 'i.contentWindow' [null] is not an object.

Wydaje się, że ten błąd występuje raczej w funkcji „niszcz ()” niż w funkcji „replace ()”. Czy ktoś tego doświadczył i znalazł inne rozwiązanie?

Czy można „ponownie wyrenderować” istniejący edytor zamiast go niszczyć i zastępować?

AKTUALIZACJA Oto kolejne pytanie dotyczące tego samego problemu, ale dostarczył on przypadek testowy do pobrania .

jackboberg
źródło

Odpowiedzi:

101

Aby to zadziałało, musisz przekazać parametr boolean true podczas niszczenia instancji:

    var editor = CKEDITOR.instances[name];
    if (editor) { editor.destroy(true); }
    CKEDITOR.replace(name);
Tomas Kirda
źródło
2
„Prawdziwe” opcje robią różnicę. Warto też wspomnieć, że podana poniżej odpowiedź „CKEDITOR.remove (instancja)” nie jest dobrym rozwiązaniem, ponieważ jest to wewnętrzne API, które również może powodować błędy, zawsze lepiej jest użyć instance.destroy (true)
Bala Clark
Dziękuję, to naprawdę mi pomóż.
niekompletne
6
Dołączam do chóru podziękowań! Uwielbiam, jak Stack Overflow zawsze rozwiązuje wszystkie moje problemy za pomocą jednego wyszukiwania.
Tommi Forsström
1
Ta odpowiedź jest TAK przydatna, jestem zaskoczony, że jest tu tak głęboko zakopana.
Petr Vostrel,
2
Powinna istnieć możliwość sortowania odpowiedzi według liczby głosów, które otrzymały, tak aby najlepsze odpowiedzi były na górze.
shasi kanth
28
function loadEditor(id)
{
    var instance = CKEDITOR.instances[id];
    if(instance)
    {
        CKEDITOR.remove(instance);
    }
    CKEDITOR.replace(id);
}
Jim
źródło
Sprawiło mi to trochę smutku, ale twoje rozwiązanie pomogło. Dzięki!
Ben Scheirman
Miałem podobny problem w firefoxie, który miał trzy instancje CKEditora na stronie, pierwszy nie wyświetlał, ale dwa pozostałe, gdzie dodałem powyższy kod i teraz pojawiają się wszystkie edytory
Craig Angus
18
Nie używaj CKEDITOR.remove, ponieważ usuwa tylko element z tablicy, ale pozostawia cały DOM w pamięci. Dokumentacja mówi , że jest przeznaczona do użytku wewnętrznego: docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.remove Należy zamiast tego użyć instace.destroy (), jak powiedział madhaviaddanki.
AlfonsoML
2
Natrafiłem na tę samą sytuację i jak zauważyłem, ta odpowiedź jest nieprawidłowa. Jak zauważono poniżej, użycie funkcji niszczenia () i przekazywania prawdziwego parametru w końcu zadziałało.
Mathachew
19

Ja też miałem ten problem, ale rozwiązałem go w dużo prostszy sposób ...

Używałem klasy „ckeditor” w moim skrypcie jQuery jako selektora, dla których obszarów tekstowych chciałem użyć CKEditor. Domyślny skrypt JS ckeditor również używa tej klasy do identyfikowania obszarów tekstu, które mają być używane przez CKEditor.

Oznaczało to konflikt między moim skryptem jQuery a domyślnym skryptem ckeditor.

Po prostu zmieniłem klasę obszaru textarea i mojego skryptu jQuery na „do_ckeditor” (można było użyć czegokolwiek poza „ckeditor”) i zadziałało.

MintDeparture
źródło
dzięki, tak, "auto" ckedytoryzacja też mi przeszkadzała. zobacz także stackoverflow.com/a/3631391/923817
D.Tate,
11

To najprostsze (i jedyne) rozwiązanie, które u mnie zadziałało:

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

Usunięcie tego wpisu w tablicy zapobiega zniszczeniu aplikacji przez tę kontrolę bezpieczeństwa formularza.

Zniszcz () i usuń () nie działa dla mnie.

adu
źródło
1
Jest to jedyne rozwiązanie, które również działało ze mną, dziękuję za opublikowanie!
Michael Robinson
Udało mi się zniszczyć () do pracy. Ale ani deleteczy destroy()w pełni oczyścić instancji edytora. Rzeczy takie jak słownik i inne powiązane obiekty nadal będą się czaić.
adu
Próbowałem instance.destroy (prawda), ale to nie zadziałało. Ale ten zadziałał dla mnie. Czy ktoś może mi powiedzieć, czy są jakieś skutki uboczne tego?
Alex,
7

Być może to ci pomoże - zrobiłem coś podobnego za pomocą jquery, z tym że ładuję nieznaną liczbę obiektów ckeditor. Zajęło mi trochę czasu, zanim się na to natknąłem - nie jest to jasne w dokumentacji.

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

A oto, co uruchamiam, aby uzyskać treść od redaktorów:

    var $editors = $("textarea.ckeditor");
    if ($editors.length) {
        $editors.each(function() {
            var instance = CKEDITOR.instances[$(this).attr("id")];
            if (instance) { $(this).val(instance.getData()); }
        });
    }

AKTUALIZACJA : Zmieniłem odpowiedź, aby użyć poprawnej metody - czyli .destroy (). .remove () ma być wewnętrzną i w pewnym momencie została nieprawidłowo udokumentowana.

ScottE
źródło
Wydaje się, że usunęło to błędy, ale przy drugim renderowaniu obszar tekstowy zawiera teraz „null” i nie mogę już wchodzić w interakcje z paskiem narzędzi lub obszarem tekstowym. Jeśli kliknę przyciski paska narzędzi, otrzymuję błędy takie jak: "TypeError: Wynik wyrażenia 'this. $. Focus' [undefined] nie jest funkcją" -lub- "TypeError: Wynik wyrażenia 'this.document.getWindow () . $ '[undefined] nie jest obiektem ". Gdzie / kiedy wywołujesz tę funkcję? Mam swój skrypt wbudowany w zawartość załadowaną w jquery. (ckeditor.js w nagłówku rodzica html)
jackboberg
Nazywam to po tym, jak wszystkie pola tekstowe zostały dodane do strony i wypełnione treścią.
ScottE
5

Miałem podobny problem, gdy tworzyliśmy kilka instancji CKeditor dla treści ładowanej przez ajax.

CKEDITOR.remove ()

Zachował DOM w pamięci i nie usunął wszystkich powiązań.

CKEDITOR.instance [identyfikator_instancji] .destroy ()

Podawałem błąd i.contentWindow błąd za każdym razem, gdy tworzę nową instancję z nowymi danymi z ajax. Ale to było tylko do momentu, gdy zorientowałem się, że niszczę instancję po wyczyszczeniu DOM.

Użyj funkcji niszczenia (), gdy instancja i jej DOM są obecne na stronie, wtedy działa idealnie.

Tejas
źródło
5

W przypadku żądań Ajax,

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

to wycięte usuwa wszystkie instancje z dokumentu. Następnie tworzy nowe instancje.

nerkn
źródło
5
var e= CKEDITOR.instances['sample'];
e.destroy();
e= null;
madhaviaddanki
źródło
3

i.contentWindow is nullBłąd wydaje się występować podczas wywoływania zniszczyć na przykład edytor, który był przywiązany do textarea nie jest już w DOM.

CKEDITORY.destroyprzyjmuje parametr noUpdate.

APIdoc stwierdza:

Jeśli instancja zastępuje element DOM, ten parametr wskazuje, czy aktualizować element z zawartością instancji.

Dlatego, aby uniknąć błędu, wywołaj funkcję niszczenia przed usunięciem elementu textarea z DOM lub wywołaj destory (true), aby uniknąć próby zaktualizowania nieistniejącego elementu DOM.

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

(przy użyciu wersji 3.6.2 z adapterem jQuery)

Scott Nelson
źródło
3

Oto, co zadziałało dla mnie:

for(name in CKEDITOR.instances)
{
  CKEDITOR.instances[name].destroy()
}
mikemike396
źródło
Upewnij się, że kod „anuluj” wywołuje coś podobnego do tego! MÓJ problem polegał na tym, że moja anulacja nie dzwoniła do zniszczenia :)
ROunofF
2
CKEDITOR.instances = new Array();

Używam tego przed wywołaniami do utworzenia instancji (jeden na załadowanie strony). Nie wiem, jak to wpływa na obsługę pamięci, a co nie. To zadziała tylko wtedy, gdy chcesz zamienić wszystkie wystąpienia na stronie.

Andrzej
źródło
1
Wypróbowałem wszystkie rozwiązania na tej stronie ... dla mojego środowiska, to jedyne, które działało (ale nie działało dobrze w moim ie9 tylko FF) ... nie jestem pewien, dlaczego inne nie, ale po 1 godzinie metodą prób i błędów, to jedyne rozwiązanie, które zadziałało. Dzięki za opublikowanie tego andrew.
Ronedog,
2

Przygotowałem własne rozwiązanie w oparciu o wszystkie powyższe kody.

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

U mnie działa idealnie.

Czasami po żądaniu AJAX pojawia się nieprawidłowa struktura DOM. Na przykład:

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

Spowoduje to również problem, a ckEditor nie będzie działać. Więc upewnij się, że masz poprawną strukturę DOM.

Tomasz Maj
źródło
2

miałem ten sam problem z instancjami, szukałem wszędzie i wreszcie ta implementacja u mnie działa:



    //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
    });
e_0910
źródło
2

Możesz usunąć dowolną instancję ckeditor, usuwając metodę ckeditor. Instancja będzie miała identyfikator lub nazwę obszaru tekstu.

if (CKEDITOR.instances[instance_name]) {
    CKEDITOR.remove(CKEDITOR.instances[instance_name]);
}
ujjwal
źródło
1

Rzeczywiście, usunięcie klasy „.ckeditor” z kodu rozwiązuje problem. Większość z nas podążała za przykładem integracji jQuery z dokumentacji ckeditora:

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

i pomyślałem „... może po prostu mogę się pozbyć lub część '.jquery_'”.

Traciłem czas na poprawianie funkcji wywołania zwrotnego (ponieważ {skin: 'office2003'} faktycznie działał), podczas gdy problem pochodził z innego miejsca.

Myślę, że dokumentacja powinna wspomnieć, że użycie „ckeditor” jako nazwy klasy nie jest zalecane, ponieważ jest to zastrzeżone słowo kluczowe.

Twoje zdrowie.

ramkam
źródło
1

Nauczyłem się tego

usuń CKEDITOR.instances [editorName];

sam w sobie, faktycznie usunął instancję. WSZYSTKIE inne metody, które przeczytałem i zobaczyłem, w tym to, co zostało znalezione tutaj w stackoverflow od jego użytkowników, nie działały dla mnie.

W mojej sytuacji używam wywołania Ajax do ściągnięcia kopii zawartości zawiniętej wokół i. Problem polega na tym, że używam zdarzenia jQuery .live, aby powiązać łącze „Edytuj ten dokument”, a następnie po pomyślnym załadowaniu pliku Ajax stosuję instancję ckeditor. Oznacza to, że kiedy kliknę w inny link, odsyłam do innego wydarzenia .live, muszę użyć opcji delete CKEDITOR.instances [editorName] ”w ramach mojego zadania polegającego na wyczyszczeniu okna treści (przytrzymaniu formularza), a następnie ponownym pobraniu zawartości wstrzymanej w bazie danych lub innym zasobie.

Nicholas Maietta
źródło
1

Mam ten sam problem z oknem dialogowym jQuery.

Po co niszczyć instancję, jeśli chcesz tylko usunąć poprzednie dane?

function clearEditor(id)
{
  var instance = CKEDITOR.instances[id];
  if(instance)
  {
    instance.setData( '' );
  }
}
Mathieu
źródło
1

Zdecydowałem się zmienić nazwy wszystkich instancji zamiast niszczyć / zastępować - ponieważ czasami instancja załadowana AJAX tak naprawdę nie zastępuje instancji w rdzeniu strony ... zachowuje więcej w pamięci RAM, ale w ten sposób mniej konfliktów.

    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];
        }
    }
zeroasterisk
źródło
1

Jestem w sytuacji, w której muszę kontrolować te okna dialogowe odradzania, każde z nich musi mieć wbudowany ckeditor w tych dialogach. I tak się składa, że ​​obszary tekstowe mają ten sam identyfikator. (Zwykle jest to bardzo zła praktyka, ale mam 2 jqGrids, jeden z przypisanych elementów, a drugi z nieprzypisanych). Mają prawie identyczną konfigurację. Dlatego używam wspólnego kodu do konfigurowania obu.

Tak więc, kiedy ładuję okno dialogowe, aby dodać wiersze lub je edytować, z jqGrid; Muszę usunąć wszystkie wystąpienia CKEDITOR we wszystkich obszarach tekstowych.

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

    }
});

Spowoduje to zapętlenie wszystkich obszarów tekstowych, a jeśli istnieje instancja CKEDITOR, zniszczy ją.

Alternatywnie, jeśli używasz czystego jQuery:

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

    }
});
DragonZero
źródło
1

remove class="ckeditor", mógł spowodować inicjalizację ckeditor

vkGunasekaran
źródło
0

Miałem ten sam problem, w którym otrzymywałem wyjątek zerowego odwołania, a słowo „null” było wyświetlane w edytorze. Wypróbowałem kilka rozwiązań, w tym aktualizację edytora do wersji 3.4.1, ale bezskutecznie.

Skończyło się na tym, że musiałem edytować źródło. Mniej więcej w wierszach od 416 do 426 w _source \ plugins \ wysiwygarea \ plugin.js znajduje się taki fragment:

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

Przynajmniej w FF element iframe nie jest w pełni tworzony do czasu, gdy jest potrzebny. Resztę funkcji po tym wierszu otoczyłem funkcją 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
...

Tekst jest teraz konsekwentnie renderowany w modalnych oknach dialogowych.

Aaron Stemen
źródło
0

Aby obsłużyć dynamiczne (Ajax) ładowanie formularzy (bez odświeżania stron pomiędzy), które zawierają obszary tekstowe z tym samym (ten sam formularz jest wywoływany ponownie) lub różnymi identyfikatorami (poprzednio wyładowany formularz) i przekonwertować je na elementy CKEditor, wykonałem następujące czynności (używając JQuery adapter):

Po zakończeniu każdego wywołania Ajax przez stronę, które dostarcza obszar tekstowy do konwersji, wywołuję następującą funkcję:

setupCKeditor()

Wygląda to tak (zakłada, że obszary tekstowe mają zostać przekonwertowane na RTE mają 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);

            });

    }


}

Powinienem wspomnieć, że wiersz:

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

mogłoby (i powinno) być po prostu:

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

Jednak stwierdziłem, że edytor często wyświetlał poprawną treść przez sekundę po załadowaniu i opróżniał edytor z żądanej treści. Tak więc ta linia z kodem wywołania zwrotnego wymusza, aby zawartość CKEditor była taka sama jak pierwotna zawartość textarea. Po użyciu powoduje migotanie. Jeśli możesz tego uniknąć, zrób to.

Liściasty
źródło
0

Miałem dokładnie ten sam problem, co jackboberg. Używałem dynamicznego ładowania formularzy do okien dialogowych jquery, a następnie dołączałem różne widżety (datepickers, ckeditors itp.). Wypróbowałem wszystkie wymienione powyżej rozwiązania, żadne z nich nie działało.

Z jakiegoś powodu ckeditor załączył się tylko przy pierwszym ładowaniu formularza, za drugim razem otrzymałem dokładnie ten sam komunikat o błędzie, co jackboberg.

Przeanalizowałem mój kod i odkryłem, że jeśli załączysz ckeditor "w powietrzu", to znaczy gdy treść formularza nadal nie jest umieszczana w oknie dialogowym, ckeditor nie będzie poprawnie dołączał swoich powiązań. Dzieje się tak, ponieważ ckeditor jest podłączony „w powietrzu”, po raz drugi podłączasz go „w powietrzu” ... poof ... pojawia się błąd, ponieważ pierwsza instancja nie została poprawnie usunięta z DOM.

To był mój kod, który spowodował błąd:

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

Oto poprawka, która zadziałała:

var $content = $(r.content).dialog(); // first create dialog
$('.rte-field',$content).ckeditor(function(){}); // then attach ckeditor widget
Ivan Hušnjak
źródło
0

Natknąłem się dokładnie na to samo i problem polegał na tym, że inicjalizacja wtyczki wordcount trwała zbyt długo. 30+ sekund. Użytkownik kliknąłby widok wyświetlający ckeditor, a następnie anulował, tym samym AJAX ładował nową stronę do domeny. Wtyczka skarżyła się, ponieważ element iframe lub cokolwiek, na co wskazuje contentWindow, nie było już widoczne do czasu, gdy był gotowy do dodania się do contentWindow. Możesz to sprawdzić, klikając swój widok, a następnie czekając, aż liczba słów pojawi się w prawym dolnym rogu edytora. Jeśli anulujesz teraz, nie będziesz mieć problemu. Jeśli nie będziesz na to czekać, pojawi się błąd i.contentWindow jest pusty. Aby to naprawić, po prostu złom wtyczkę:

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

Jeśli potrzebujesz licznika słów, zarejestruj się na zdarzenia wklejania i wpisywania klucza w edytorze za pomocą funkcji zliczającej słowa.

Sean Roy
źródło
0

Dla tych, którzy używają "adaptera" jquery i mają kłopoty (tak jak ja), ponieważ super hackish, ale działającym rozwiązaniem jest zrobienie czegoś takiego:

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

});

Kluczowym punktem jest ta część:

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

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

Rozwiązuje to problem polegający na tym, że tekst edytora nie był widoczny przy następnym otwarciu okna dialogowego. Zdaję sobie sprawę, że jest to bardzo hakerskie, ale biorąc pod uwagę, że większość z nich będzie używana jako narzędzia administracyjne, nie sądzę, że jest to tak duży problem, jak zwykle ... i to działa, więc mam nadzieję, że zaoszczędzi to komuś trochę czas;)

Eva
źródło
0

To jest w pełni działający kod dla jquery .load () api i ckeditor, w moim przypadku ładuję stronę z ckeditor do div z pewnymi efektami jquery. Mam nadzieję, że ci to pomoże.

 $(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')" >
Khandad Niazi
źródło
0

To całkiem proste. W moim przypadku uruchomiłem poniższą metodę jquery, która niszczy wystąpienia ckeditor podczas ładowania strony. To załatwiło sprawę i rozwiązało problem -

Metoda 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

       });

Otóż ​​to. Mam nadzieję, że Ci to pomoże.

Pozdrawiam, Sirish.

Sirish
źródło
0

Ta funkcja działa u mnie w CKEditor w wersji 4.4.5, nie ma żadnych wycieków pamięci

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

// wywołaj tę funkcję jak poniżej

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

CKEditor_Render(id);
Shujaat Kagathra
źródło
0

CKeditor 4.2.1

Odpowiedzi jest tu wiele, ale potrzebowałem czegoś więcej (też trochę brudnego, więc jeśli ktoś może poprawić, proszę). Dla mnie MODAL, gdzie mój problem.

Renderowałem CKEditor w trybie modalnym, używając Foundation. Idealnie zniszczyłbym redaktora po zamknięciu, jednak nie chciałem zadzierać z Fundacją.

Zadzwoniłem do delete, próbowałem usunąć i innej metody, ale z tym w końcu się zdecydowałem.

Używałem textarea do wypełnienia, a nie DIV.

Moje rozwiązanie

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

to była moja metoda zwracania mojego określonego formatowania, którego możesz nie chcieć.

    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']
                    ]
                };
    }
Adam
źródło
0

Spróbuj tego:

for (name in CKEDITOR.instances)
{
    CKEDITOR.instances[name].destroy(true);
}
Tunde Pizzle
źródło