带 ajax 选项卡的 TinyMCE

Question

我正在使用 JQuery UI 1.8 的选项卡组件，并且通过 ajax（html 内容）加载选项卡的内容。在其中一个选项卡中，我使用tinyMCE组件，当我第一次加载该选项卡时，tiny会正确初始化，但如果我导航到其他选项卡并再次调用该选项卡，tiny就会崩溃。

当tiny_mce.js 的导入位于选项卡内容之外时，就会发生这种情况。当我将导入移至选项卡调用时，微小的未加载，因为它似乎未初始化。

问题是：如何在ajax选项卡中初始化tiny？

提前致谢。

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

每次切换回带有编辑器的选项卡时，可能值得重新初始化微型 MCE。您可以在选项卡对象上使用“select”事件。

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

在重新初始化之前，您可能必须销毁编辑器的任何先前实例/引用。

Answer 3

在切换到另一个选项卡之前，您需要关闭 tinymce 实例，否则具有该 id 的编辑器元素将被阻止。

在切换选项卡之前删除控件

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

Answer 4

我找到了解决问题的方法。 tinymce的初始化必须在jquery tabs的load事件中进行，如下所示：

$("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加载textarea的内容，则

tinyMCE.triggerSave();

不需要命令：。

Answer 5

好吧，今天花了 3 个小时解决同样的问题...使用 Jquery UI 1.10 和 TinyMCE 4。

问题是，当取消选择时，ajax 面板的内容不会从 DOM 中删除，而只是隐藏。这意味着文本区域在 DOM 中的出现可能会超过 1 倍（导航面板）。 =>微小的 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加载面板”和“预加载面板”的方法...
这很遗憾，因为您必须将每个“预加载面板”id 添加到代码中......

无论如何，这解决了微小的 MCE 问题。无需初始化加载事件，并使用 mceRemoveControl/mceAddControl 命令。
只需在“ajax加载选项卡面板”视图中初始化tinyMCE编辑：

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