TinyMCE с вкладками ajax

Когда у меня были похожие проблемы с TinyMCE и переключением между вкладками, загруженными ajax, я нашел этот замечательный фрагмент кода по адресу Ready4State, поэтому я решил поделиться, надеюсь, это поможет другим.

Это удалит все экземпляры TinyMCE на странице.

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

Затем вы можете безопасно повторно инициализировать TinyMCE.

Лично я выполняю приведенный выше код перед использованием оператора switch для обработки каждого ui.index, и у меня есть функция, которая выполняет инициализацию для TinyMCE. Поэтому я просто вызываю эту функцию в каждом из соответствующих операторов case.

Надеюсь, это поможет кому-то еще.

Возможно, стоит повторно инициализировать крошечный MCE каждый раз, когда вы переключаетесь обратно на вкладку с открытым редактором. Вы можете использовать событие «выбрать» для объекта вкладки.

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

Возможно, вам придется уничтожить все предыдущие экземпляры / ссылок на редактор перед повторной инициализацией.

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

Удалите элемент управления, прежде чем переключать вкладку с помощью

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

Я нашел решение своей проблемы. Инициализация tinymce должна происходить в событии load вкладки jquery, например:

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

Надеюсь, это поможет другим. Кроме того, если содержимое текстовой области загружается через ajax, команда:

tinyMCE.triggerSave();

не требуется.

Ну, сегодня потратил 3 часа на ту же проблему... с Jquery UI 1.10 и TinyMCE 4.

Проблема в том, что при невыборе содержимое панели ajax не удаляется из DOM, а просто скрывается. Это означает, что текстовая область может быть более 1 раза в DOM (навигация по панелям). => Смерть крошечного MCE...

В Jquery 1.10 нет события для захвата «невыбранной панели». Вы должны иметь дело с событием перед загрузкой.

Таким образом, идея состоит в том, чтобы очистить каждую панель с «загрузкой ajax» перед загрузкой панели. Код :

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

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

Во всяком случае, это решает крошечную проблему MCE. Нет необходимости инициализировать событие загрузки и использовать команды mceRemoveControl/mceAddControl. Просто запустите редактирование tinyMCE в представлении «панель вкладок с загрузкой 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"
    }); 
});