TinyMCE dengan tab ajax

Ketika saya mengalami masalah serupa dengan TinyMCE dan beralih di antara tab yang dimuat ajax, saya menemukan potongan kode yang luar biasa ini di Ready4State jadi saya pikir saya akan membagikannya karena saya berharap ini dapat membantu orang lain.

Tindakan ini akan menghapus semua contoh TinyMCE di laman tersebut.

var i, t = tinyMCE.editors;
for (i in t){
  if (t.hasOwnProperty(i)){
    t[i].remove();
  }
}    

Kemudian Anda dapat menginisialisasi ulang TinyMCE dengan aman.

Secara pribadi saya menjalankan kode di atas sebelum menggunakan pernyataan switch untuk menangani setiap ui.index, dan saya memiliki fungsi yang melakukan inisialisasi untuk TinyMCE. Jadi saya hanya memanggil fungsi itu di setiap pernyataan kasus yang relevan.

Semoga ini bisa membantu orang lain.

Mungkin ada baiknya menginisialisasi ulang MCE kecil setiap kali Anda beralih kembali ke tab dengan editor di dalamnya. Anda dapat menggunakan acara "pilih" pada objek tab.

$( ".selector" ).tabs({
  select: function(event, ui) { 
    // initialise Tiny MCE here
  }
});

Anda mungkin harus menghancurkan semua instance/referensi sebelumnya ke editor sebelum melakukan inisialisasi ulang.

Anda harus mematikan instance tinymce Anda sebelum beralih ke tab lain, jika tidak, elemen editor dengan id tersebut akan diblokir.

Hapus kontrol sebelum Anda mengganti tab menggunakan

// the_editor_id equals the id of the underliing textarea
tinyMCE.execCommand('mceRemoveControl', false, the_editor_id);

Saya menemukan solusi untuk masalah saya. Inisialisasi tinymce harus dalam event load di tab jquery, seperti ini:

$("div#tabs").tabs ({collapsible: false
                    ,selected:    -1
                    ,fx: {opacity: 'toggle'}
                    ,load: function (event, ui) {

                       // Tab with tinyMCE
                       if (ui.index == 0) {
                          tinyMCE.init({mode: "none",
                                        theme: "advanced",
                                        theme_advanced_toolbar_location: "top",
                                        theme_advanced_toolbar_align: "left"
                                       });
                          tinyMCE.execCommand ('mceAddControl', false, 'text_area_id');
                       }
                       else {
                         tinyMCE.triggerSave();
                         tinyMCE.execCommand('mceFocus', false, 'text_area_id');
                         tinyMCE.execCommand('mceRemoveControl', false, 'text_area_id');
                       }
                     }
              });

Saya harap ini membantu orang lain. Selain itu, jika konten textarea dimuat melalui ajax, perintahnya:

tinyMCE.triggerSave();

tidak diperlukan.

Ya, menghabiskan 3 jam untuk masalah yang sama hari ini... dengan Jquery UI 1.10 dan TinyMCE 4.

Masalahnya, jika tidak dipilih, konten panel ajax tidak terhapus dari DOM melainkan hanya disembunyikan. Artinya textarea bisa lebih dari 1 kali di DOM (menavigasi panel). => Kematian MCE kecil...

Tidak ada acara di Jquery 1.10 untuk menangkap "panel yang tidak dipilih". Anda harus berurusan dengan acara sebelum memuat.

Jadi idenya adalah mengosongkan setiap panel "ajax dimuat" sebelum memuat panel. Kode :

$( "#list_onglet_lecteur" ).tabs({
    beforeLoad: 
        function( event, ui ) {
            $("#list_onglet_lecteur div[role=tabpanel]").each(function(){
                if($(this).attr("id") != "list_onglet_lecteur-accueil")$(this).empty();
            });

            $(ui.panel).html('<div style="width:100%;text-align:center"><img src="/images/ajax_loader_big.gif" alt=""></img><br />Chargement de l\'onglet</div>');
            ui.jqXHR.error(function() {
                ui.panel.html("Echec du chargement de l'onglet. Merci d'actualiser la page.");
            });
    } 
})

Catatan, saya belum menemukan cara untuk membuat perbedaan antara "panel yang dimuat ajax" dan "panel yang dimuat sebelumnya"... Sayang sekali karena Anda harus menambahkan setiap id "panel yang dimuat sebelumnya" ke dalam kode...

Bagaimanapun, itu menyelesaikan masalah kecil MCE. Tidak perlu masuk ke acara load, dan gunakan perintah mceRemoveControl/mceAddControl. Cukup mulai pengeditan tinyMCE di tampilan "panel tab yang dimuat ajax":

 $(function() {   
    tinyMCE.init({
        height : 300,
        mode : "specific_textareas",
        editor_selector : "mceEditor",
        theme : "modern",
        language : 'fr_FR',
        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media contextmenu paste moxiemanager"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
    }); 
});