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

Question

Я использую компонент tabs из JQuery UI 1.8 и загружаю содержимое вкладок через ajax (html-контент).На одной из этих вкладок я использую компонент tinyMCE, и когда я загружаю эту вкладку в первый раз, то крошечные инициализируются правильно, но если я перехожу на другую вкладку и снова вызываю вкладку, крошечный ломается.

Это происходит, когда импорт tiny_mce.js находится за пределами содержимого вкладок.Когда я перемещаю импорт в вызов табуляции, то крошечный не загружается, потому что он, кажется, не инициализирован.

Вопрос: как инициализировать крошечный на вкладке ajax?

Спасибо ввперед.

Answer 1

Когда у меня возникали аналогичные проблемы с 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.

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

Answer 2

Ну, потратил 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"
    }); 
});

Answer 3

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

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

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

Answer 4

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

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

не обязательна.

Answer 5

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

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

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