Instance CKEditor sudah ada

99

Saya menggunakan dialog jquery untuk menyajikan formulir (diambil melalui AJAX). Pada beberapa formulir saya menggunakan CKEditor untuk textareas. Editor menampilkan baik-baik saja pada pemuatan pertama.

Ketika pengguna membatalkan dialog, saya menghapus konten sehingga mereka dimuat segar pada permintaan nanti. Masalahnya adalah, setelah dialog dimuat ulang, CKEditor mengklaim editor tersebut sudah ada.

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

API menyertakan metode untuk menghancurkan editor yang ada, dan saya telah melihat orang-orang mengklaim ini adalah solusinya:

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

Ini tidak berfungsi untuk saya, karena saya menerima kesalahan baru sebagai gantinya:

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

Kesalahan ini tampaknya terjadi pada "destroy ()" daripada "replace ()". Adakah yang pernah mengalami ini dan menemukan solusi yang berbeda?

Apakah mungkin untuk 'merender ulang' editor yang ada, daripada menghancurkan dan menggantinya?

DIPERBARUI Berikut adalah pertanyaan lain yang berhubungan dengan masalah yang sama, tetapi dia telah menyediakan kasus uji yang dapat diunduh .

jackboberg
sumber

Jawaban:

101

Agar ini berfungsi, Anda harus meneruskan parameter boolean true saat menghancurkan instance:

    var editor = CKEDITOR.instances[name];
    if (editor) { editor.destroy(true); }
    CKEDITOR.replace(name);
Tomas Kirda
sumber
2
Opsi yang "benar" membuat semua perbedaan. Perlu juga disebutkan bahwa jawaban "CKEDITOR.remove (instance)" yang diberikan di bawah ini bukanlah solusi yang baik karena ini adalah API internal yang juga dapat menghasilkan kesalahan, selalu lebih baik menggunakan instance.destroy (true)
Bala Clark
Terima kasih, ini benar-benar membantu saya.
tidak lengkap
6
Bergabung dalam paduan suara ucapan terima kasih! Saya suka bagaimana Stack Overflow selalu menyelesaikan semua masalah saya dengan satu pencarian.
Tommi Forsström
1
Jawaban ini SANGAT berguna, saya terkejut karena terkubur begitu dalam di sini.
Petr Vostrel
2
Seharusnya ada opsi untuk mengurutkan jawaban berdasarkan jumlah suara yang mereka terima .. jadi jawaban terbaik adalah yang teratas.
shasi kanth
28
function loadEditor(id)
{
    var instance = CKEDITOR.instances[id];
    if(instance)
    {
        CKEDITOR.remove(instance);
    }
    CKEDITOR.replace(id);
}
Jim
sumber
Ini membuat saya sedikit sedih, tetapi solusi Anda membantu. Terima kasih!
Ben Scheirman
Saya memiliki masalah serupa di firefox yang memiliki tiga contoh CKEditor di halaman, yang pertama tidak ditampilkan tetapi dua lainnya di mana, saya menambahkan kode di atas dan semua editor sekarang muncul
Craig Angus
18
Jangan gunakan CKEDITOR.remove karena ini hanya membersihkan elemen dari larik, tetapi meninggalkan semua DOM di memori. Dinyatakan dalam dokumen bahwa ini dimaksudkan untuk penggunaan internal: docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.remove Anda sebaiknya menggunakan instace.destroy () seperti yang dikatakan madhaviaddanki.
AlfonsoML
2
Berlari melintasi situasi yang sama dan seperti yang dicatat, jawaban ini salah. Menggunakan destroy () dan meneruskan parameter true adalah yang akhirnya berhasil untuk saya, seperti yang disebutkan di bawah ini.
Mathachew
19

Saya mengalami masalah ini juga, tetapi saya menyelesaikannya dengan cara yang jauh lebih sederhana ...

Saya menggunakan kelas "ckeditor" dalam skrip jQuery saya sebagai pemilih textareas yang ingin saya gunakan untuk CKEditor. Skrip JS ckeditor default juga menggunakan kelas ini untuk mengidentifikasi textarea mana yang akan digunakan untuk CKEditor.

Ini berarti ada konflik antara skrip jQuery saya dan skrip ckeditor default.

Saya hanya mengubah kelas textarea dan skrip jQuery saya menjadi 'do_ckeditor' (Anda dapat menggunakan apa saja kecuali "ckeditor") dan itu berhasil.

MintDeparture
sumber
terima kasih, ya, pengawasan "otomatis" juga mengganggu saya. lihat juga stackoverflow.com/a/3631391/923817
Tanggal D
11

Ini adalah solusi paling sederhana (dan satu-satunya) yang berhasil untuk saya:

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

Menghapus entri ini dalam larik mencegah pemeriksaan keamanan formulir ini untuk menghancurkan aplikasi Anda.

destroy () dan remove () tidak berhasil untuk saya.

adu
sumber
1
Ini adalah satu-satunya solusi yang berhasil dengan saya juga, terima kasih telah mempostingnya!
Michael Robinson
Saya benar-benar hancur () untuk bekerja. Tetapi tidak ada deleteatau destroy()sepenuhnya bersihkan instance editor. Hal-hal seperti kamus dan objek terkait lainnya akan tetap mengintai.
adu
Saya mencoba instance.destroy (true), tetapi tidak berhasil untuk saya. Tapi yang ini berhasil untuk saya. Adakah yang bisa memberi tahu saya, apakah ada efek samping dari ini?
Alex
7

Mungkin ini akan membantu Anda - Saya telah melakukan sesuatu yang serupa menggunakan jquery, kecuali saya memuat objek ckeditor dalam jumlah yang tidak diketahui. Butuh beberapa saat untuk tersandung pada ini - tidak jelas dalam dokumentasi.

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

Dan inilah yang saya jalankan untuk mendapatkan konten dari editor:

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

UPDATE : Saya telah mengubah jawaban saya untuk menggunakan metode yang benar - yaitu .destroy (). .remove () dimaksudkan untuk menjadi internal, dan didokumentasikan dengan tidak benar pada satu titik.

ScottE
sumber
Ini tampaknya telah menghilangkan kesalahan, tetapi pada rendering kedua textarea sekarang berisi 'null' dan saya tidak dapat lagi berinteraksi dengan toolbar atau textarea. Jika saya mengklik tombol toolbar, saya menerima kesalahan seperti: "TypeError: Hasil ekspresi 'this. $. Focus' [undefined] bukan fungsi" -atau- "TypeError: Hasil ekspresi 'this.document.getWindow () . $ '[undefined] bukanlah sebuah objek ". Di mana / kapan Anda memanggil fungsi itu? Saya memiliki skrip saya sejalan dengan konten yang dimuat jquery. (ckeditor.js di kepala html induk)
jackboberg
Saya menyebutnya ini setelah semua area teks telah ditambahkan ke halaman dan diisi dengan konten.
ScottE
5

Saya mengalami masalah serupa di mana kami membuat beberapa contoh CKeditor untuk konten yang dimuat melalui ajax.

CKEDITOR.remove ()

Simpan DOM di memori dan tidak menghapus semua binding.

CKEDITOR.instance [instance_id] .destroy ()

Memberikan error i.contentWindow error setiap kali saya membuat instance baru dengan data baru dari ajax. Tetapi ini hanya sampai saya mengetahui bahwa saya menghancurkan instance setelah membersihkan DOM.

Gunakan destroy () saat instance & DOMnya ada di halaman, maka itu berfungsi dengan baik.

Tejas
sumber
5

Untuk permintaan ajax,

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

potongan ini menghapus semua contoh dari dokumen. Kemudian buat instance baru.

nerkn
sumber
5
var e= CKEDITOR.instances['sample'];
e.destroy();
e= null;
madhaviaddanki
sumber
3

The i.contentWindow is nullKesalahan tampaknya terjadi saat memanggil menghancurkan pada contoh editor yang diikat ke textarea tidak lagi di DOM.

CKEDITORY.destroymengambil parameter noUpdate.

APIdoc menyatakan:

Jika instance mengganti elemen DOM, parameter ini menunjukkan apakah akan memperbarui elemen dengan konten instance atau tidak.

Jadi, untuk menghindari kesalahan, panggil penghancuran sebelum menghapus elemen textarea dari DOM, atau panggil destory (true) untuk menghindari mencoba memperbarui elemen DOM yang tidak ada.

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

(menggunakan versi 3.6.2 dengan adaptor jQuery)

Scott Nelson
sumber
3

Inilah yang berhasil untuk saya:

for(name in CKEDITOR.instances)
{
  CKEDITOR.instances[name].destroy()
}
mikemike396
sumber
Pastikan kode "batal" Anda memanggil sesuatu yang mirip dengan ini! Masalah saya adalah bahwa pembatalan saya tidak menelepon merusak :)
ROunofF
2
CKEDITOR.instances = new Array();

Saya menggunakan ini sebelum panggilan saya untuk membuat sebuah instance (yang per pemuatan halaman). Tidak yakin bagaimana hal ini mempengaruhi penanganan memori dan apa yang tidak. Ini hanya akan berfungsi jika Anda ingin mengganti semua contoh di halaman.

Andrew
sumber
1
Saya mencoba semua solusi di halaman ini ... untuk lingkungan saya, ini adalah satu-satunya yang berfungsi (tetapi tidak berfungsi dengan benar di satu-satunya FF IE9 saya) ... tidak yakin mengapa yang lain tidak tetapi setelah 1 jam trial and error, ini adalah satu-satunya solusi yang berhasil untuk saya. Terima kasih telah memposting Andrew ini.
Ronedog
2

Saya telah menyiapkan solusi saya sendiri berdasarkan semua kode di atas.

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

Ini bekerja dengan sempurna untuk saya.

Terkadang setelah permintaan AJAX ada struktur DOM yang salah. Sebagai contoh:

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

Ini akan menyebabkan masalah juga, dan ckEditor tidak akan berfungsi. Jadi, pastikan Anda memiliki struktur DOM yang benar.

Tomasz Mayor
sumber
2

saya memiliki masalah yang sama dengan contoh, saya mencari di mana-mana dan akhirnya penerapan ini berfungsi untuk saya:



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

Anda dapat menghapus instance ckeditor apa pun dengan menghapus metode ckeditor. Instance akan menjadi id atau nama textarea.

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

Memang, menghapus kelas ".ckeditor" dari kode Anda memecahkan masalah. Sebagian besar dari kita mengikuti contoh integrasi jQuery dari dokumentasi ckeditor:

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

dan berpikir "... mungkin saya bisa menyingkirkan atau bagian '.jquery_'".

Saya telah membuang-buang waktu saya untuk mengutak-atik fungsi panggilan balik (karena {skin: 'office2003'} benar-benar berfungsi), sementara masalahnya datang dari tempat lain.

Saya pikir dokumentasi harus menyebutkan bahwa penggunaan "ckeditor" sebagai nama kelas tidak disarankan, karena ini adalah kata kunci yang dipesan.

Bersulang.

ramkam
sumber
1

Saya belajar itu

hapus CKEDITOR.instances [editorName];

dengan sendirinya, benar-benar menghapus instance tersebut. SEMUA metode lain yang telah saya baca dan lihat, termasuk apa yang ditemukan di sini di stackoverflow dari penggunanya, tidak berhasil untuk saya.

Dalam situasi saya, saya menggunakan panggilan ajax untuk menarik salinan konten yang dililitkan di sekitar dan. Masalahnya terjadi karena saya menggunakan acara jQuery .live untuk mengikat tautan "Edit dokumen ini" dan kemudian menerapkan contoh ckeditor setelah keberhasilan pemuatan ajax. Artinya, ketika saya mengklik tautan lain sebuah tautan dengan acara .live lain, saya harus menggunakan hapus CKEDITOR.instances [nama editor] sebagai bagian dari tugas saya untuk membersihkan jendela konten (menahan formulir), kemudian mengambil kembali konten yang ditahan di database atau resource lain.

Nicholas Maietta
sumber
1

Saya mengalami masalah yang sama dengan jQuery Dialog.

Mengapa menghancurkan instance jika Anda hanya ingin menghapus data sebelumnya?

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

Saya memilih untuk mengganti nama semua instance daripada menghancurkan / mengganti - karena terkadang instance yang dimuat AJAX tidak benar-benar menggantikan yang ada di inti halaman ... menyimpan lebih banyak di RAM, tetapi lebih sedikit konflik dengan cara ini.

    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
sumber
1

Saya berada dalam situasi di mana saya harus mengontrol dialog spawn, masing-masing harus memiliki ckeditor yang disematkan di dalam dialog ini. Dan kebetulan area teks berbagi id yang sama. (biasanya ini adalah praktik yang sangat buruk, tetapi saya memiliki 2 jqGrid, satu dari item yang ditetapkan dan satu lagi dari item yang belum ditetapkan.) Mereka berbagi konfigurasi yang hampir sama. Jadi, saya menggunakan kode umum untuk mengkonfigurasi keduanya.

Jadi, ketika saya memuat dialog, untuk menambahkan baris, atau untuk mengeditnya, baik dari jqGrid; Saya harus menghapus semua contoh CKEDITOR di semua area teks.

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

    }
});

Ini akan mengulang semua textarea, dan jika ada instance CKEDITOR, maka hancurkan.

Atau jika Anda menggunakan jQuery murni:

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

    }
});
DragonZero
sumber
1

hapus class="ckeditor", itu mungkin telah memicu inisialisasi ckeditor

vkGunasekaran.dll
sumber
0

Saya memiliki masalah yang sama ketika saya menerima pengecualian referensi null dan kata "null" akan ditampilkan di editor. Saya mencoba beberapa solusi, termasuk memutakhirkan editor ke 3.4.1 tetapi tidak berhasil.

Saya akhirnya harus mengedit sumbernya. Di sekitar baris 416 hingga 426 di _source \ plugins \ wysiwygarea \ plugin.js, ada cuplikan seperti ini:

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

Setidaknya di FF, iframe tidak sepenuhnya dibuat pada saat diperlukan. Saya mengepung sisa fungsi setelah baris itu dengan fungsi 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
...

Teks sekarang dirender secara konsisten dalam dialog modal.

Aaron Stemen
sumber
0

Untuk mendukung pemuatan dinamis (Ajax) formulir (tanpa penyegaran halaman antara) yang berisi area teks dengan yang sama (formulir yang sama disebut lagi) atau ID yang berbeda (formulir yang sebelumnya dibongkar) dan mengubahnya menjadi elemen CKEditor, saya melakukan hal berikut (menggunakan JQuery adaptor):

Setelah halaman menyelesaikan setiap panggilan Ajax yang mengirimkan textarea untuk dikonversi, saya melakukan panggilan ke fungsi berikut:

setupCKeditor()

Ini terlihat seperti ini (mengasumsikan textareas Anda akan dikonversi ke RTE memiliki 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);

            });

    }


}

Saya harus menyebutkan bahwa baris:

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

bisa (dan seharusnya) sederhana:

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

namun saya menemukan bahwa editor akan sering menampilkan konten yang benar sesaat setelah memuat dan mereka mengosongkan editor dari konten yang diinginkan. Jadi baris dengan kode panggilan balik memaksa konten CKEditor menjadi sama dengan konten textarea asal. Menyebabkan flicker saat digunakan. Jika Anda tidak dapat menggunakannya, lakukanlah ..

Rindang
sumber
0

Saya memiliki masalah yang persis sama seperti jackboberg. Saya menggunakan pemuatan bentuk dinamis ke dalam dialog jquery kemudian melampirkan berbagai widget (datepickers, ckeditors dll ...). Dan saya mencoba semua solusi yang disebutkan di atas, tidak ada yang berhasil untuk saya.

Untuk beberapa alasan ckeditor hanya melampirkan pertama kali saya memuat formulir, kedua kalinya saya mendapat pesan kesalahan yang sama persis seperti yang dilakukan jackboberg.

Saya telah menganalisis kode saya dan menemukan bahwa jika Anda memasang ckeditor di "tengah-udara" saat konten formulir masih belum ditempatkan ke dalam dialog, ckeditor tidak akan memasang bindingnya dengan benar. Itu karena ckeditor dipasang di "udara-tengah", kedua kali Anda memasangnya di "udara" ... poof ... kesalahan muncul karena contoh pertama tidak dihapus dengan benar dari DOM.

Ini adalah kode saya yang menyebabkan kesalahan:

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

Ini adalah perbaikan yang berhasil:

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

Saya mengalami hal yang persis sama dan masalahnya adalah plugin wordcount terlalu lama untuk diinisialisasi. 30+ detik. Pengguna akan mengklik tampilan yang menampilkan ckeditor, lalu membatalkan, dengan demikian ajax memuat halaman baru ke dalam dom. Plugin mengeluh karena iframe atau konten apa pun yang ditunjuk oleh contentWindow tidak lagi terlihat pada saat ia siap untuk menambahkan dirinya sendiri ke contentWindow. Anda dapat memverifikasi ini dengan mengklik ke tampilan Anda dan kemudian menunggu Word Count muncul di kanan bawah editor. Jika Anda membatalkan sekarang, Anda tidak akan mendapat masalah. Jika Anda tidak menunggu, Anda akan mendapatkan i.contentWindow is null error. Untuk memperbaikinya, cukup hapus plugin:

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

Jika Anda memerlukan penghitung kata, daftarkan acara tempel dan keyup di editor dengan fungsi yang menghitung kata.

Sean Roy
sumber
0

Bagi mereka yang menggunakan jquery "adapter" dan mengalami masalah (seperti dulu), solusi yang sangat hackish namun berfungsi adalah melakukan sesuatu seperti ini:

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

});

Poin utamanya adalah bagian ini:

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

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

Ini memperbaiki masalah teks editor yang tidak terlihat saat Anda membuka dialog di lain waktu. Saya menyadari ini sangat hackish, tetapi mengingat bahwa sebagian besar akan digunakan untuk alat admin, saya rasa itu bukan masalah besar seperti biasanya .. dan ini berfungsi, jadi semoga ini akan menyelamatkan seseorang. waktu;)

Eva
sumber
0

Ini adalah kode yang berfungsi penuh untuk jquery .load () api dan ckeditor, dalam kasus saya, saya memuat halaman dengan ckeditor ke div dengan beberapa efek jquery. Saya harap ini akan membantu Anda.

 $(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
sumber
0

Ini sangat sederhana. Dalam kasus saya, saya menjalankan metode jquery di bawah ini yang akan menghancurkan instance ckeditor selama pemuatan halaman. Ini melakukan trik dan menyelesaikan masalah -

Metode 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

       });

Itu dia. Saya harap ini membantu Anda.

Cheers, Sirish.

Sirish
sumber
0

Fungsi ini berfungsi untuk saya di CKEditor versi 4.4.5, tidak ada kebocoran memori

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

// panggil fungsi ini seperti di bawah

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

CKEditor_Render(id);
Shujaat Kagathra
sumber
0

CKeditor 4.2.1

Ada banyak jawaban di sini tetapi bagi saya saya membutuhkan sesuatu yang lebih (agak kotor juga jadi jika ada yang bisa meningkatkan tolong lakukan). Bagi saya MODAL dimana masalah saya.

Saya merender CKEditor dalam sebuah modal, menggunakan Foundation. Idealnya saya akan menghancurkan editor setelah menutupnya, namun saya tidak ingin mengacaukan Foundation.

Saya menelepon hapus, saya mencoba menghapus dan metode lain tetapi inilah yang akhirnya saya selesaikan.

Saya menggunakan textarea untuk mengisi bukan DIV.

Solusi Saya

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

ini adalah metode saya untuk mengembalikan pemformatan spesifik saya, yang mungkin tidak Anda inginkan.

    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
sumber
0

Coba ini:

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