带有ajax选项卡的TinyMCE
我正在使用JQuery UI 1.8的标签组件，我正在通过ajax（html内容）加载标签的内容。 在其中一个选项卡中，我使用的是tinyMCE组件，当我第一次加载此选项卡时，微小的初始化正确，但如果我navegate到其他选项卡，我再次回想起该选项卡，那么微小的分解。
当tiny_mce.js的导入超出选项卡的内容时，会发生这种情况。 当我将导入移动到tab调用时，tiny没有加载，因为它似乎没有初始化。
问题是：如何在ajax标签中初始化tiny？
提前致谢。
当我遇到与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。您可以在选项卡对象上使用“select”事件。
$( ".selector" ).tabs({ select: function(event, ui) { // initialise Tiny MCE here } });
在重新初始化之前，您可能必须销毁编辑器的任何先前实例/引用。
您需要在切换到另一个选项卡之前关闭您的tinymce实例，否则将阻止具有该ID的编辑器元素。
使用切换选项卡之前，请删除控件
// the_editor_id equals the id of the underliing textarea tinyMCE.execCommand('mceRemoveControl', false, the_editor_id);
我找到了解决问题的方法。 tinymce的初始化必须在jquery选项卡的 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();
不是必要的。
好吧，今天用同样的问题花了3个小时……用Jquery UI 1.10和TinyMCE 4。
问题是，当取消选择时，ajax面板的内容不会从DOM中删除而只是隐藏。 这意味着textarea在DOM中可能超过1次（导航面板）。 =>小MCE的死亡……
Jquery 1.10中没有任何事件可以捕获“未选中的面板”。 你必须处理前加载事件。
所以我的想法是在加载面板之前清空每个“ajax loaded”面板。 代码 ：
$( "#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('
Chargement de l\'onglet'); ui.jqXHR.error(function() { ui.panel.html("Echec du chargement de l'onglet. Merci d'actualiser la page."); }); } })
注意我没有找到方法来区分“ajax加载面板”和“预加载面板”…这是一个耻辱，因为你必须将每个“预加载面板”ID添加到代码中…
无论如何，这解决了微小的MCE问题。 无需init进入load事件，并使用mceRemoveControl / mceAddControl命令。 只需在“ajax loaded tab panel”视图中初始化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" }); });