带有 ajax 选项卡的 TinyMCE

Question

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

当 tiny_mce.js 的导入超出选项卡的内容时会发生这种情况。当我将导入移到选项卡调用中时，tiny 没有加载，因为它似乎没有初始化。

问题是：如何在 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。您可以在选项卡对象上使用“选择”事件。

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

我希望这对其他人有所帮助。另外，如果textarea的内容是通过ajax加载的，命令：

tinyMCE.triggerSave();

没有必要。

Answer 5

嗯，今天在同一个问题上花了 3 个小时......使用 Jquery UI 1.10 和 TinyMCE 4。

问题是，当取消选中时，ajax 面板的内容并没有从 DOM 中删除，而是被隐藏了。这意味着 textarea 在 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"
    }); 
});