在AJAX中重新初始化TinyMCE 4
我在启用了ajax的Foundation Reveal框中使用了TinyMCE。 现在TinyMCE在它第一次加载时踢，但如果我关闭盒并再次打开它不会触发:(
我有其他脚本，如选择和屏蔽输入触发在完全相同的前查询工作，但TinyMCE将不会重新初始化我再次加载它第二次
这是我目前的代码，我正在尝试这个问题 ：
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () { $("#expenseUser, #expenseVendorID, #expenseCategoryID, #expenseAccidentID").chosen({disable_search_threshold: 5, width: '365px'}); $("#expOdo").mask("999999",{placeholder:"0"}); $('.datePicker').each(function() { $(this).datetimepicker({ addSliderAccess: true, sliderAccessArgs: {touchonly: false}, changeMonth: true, changeYear: true, altField: "#"+$(this).attr('id')+"Alt", altFieldTimeOnly: false, altFormat: "yy-mm-dd", altTimeFormat : "HH:mm:ss", dateFormat: "D, d MM yy", timeFormat: "hh:mmtt" }); }); tinymce.execCommand('mceRemoveEditor',true,"textarea#expenseComments"); tinymce.execCommand('mceAddEditor',true,"textarea#expenseComments"); tinyMCE.init({selector: "textarea#expenseComments",menubar : false,toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright"}); }); 更新
我已经尝试过运气转换到以下内容，但我认为这是正确的道路吗？
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () { $("#expenseUser, #expenseVendorID, #expenseCategoryID, #expenseAccidentID").chosen({disable_search_threshold: 5, width: '365px'}); $("#expOdo").mask("999999",{placeholder:"0"}); $('.datePicker').each(function() { $(this).datetimepicker({ addSliderAccess: true, sliderAccessArgs: {touchonly: false}, changeMonth: true, changeYear: true, altField: "#"+$(this).attr('id')+"Alt", altFieldTimeOnly: false, altFormat: "yy-mm-dd", altTimeFormat : "HH:mm:ss", dateFormat: "D, d MM yy", timeFormat: "hh:mmtt" }); }); tinyMCE.init({selector: "textarea#expenseComments",menubar : false,toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright"}); }); $(document).on('close.fndtn.reveal', '[data-reveal]', function () { tinymce.execCommand('mceRemoveEditor',true,"textarea#expenseComments"); });
这里的问题是关闭盒子而不正确关闭内部的tinymce实例将导致第二次不显示编辑器（因为变量window.tinymce.editors中仍然存在一个tinymce编辑器对象）。
解决方案 ：onclose（实际上在销毁或删除之前）该框关闭了编辑器。
删除现有的tinymce编辑器并添加新的需要清除tinymce.EditorManager.editors数组。 此解决方案适用于两种情况：
- 如果您只有一个编辑器，并且想要删除并再次添加它。
-
如果您有多个编辑器，并且想要删除一些特殊编辑器并再次添加它。
的console.log（tinymce.EditorManager.editors）;
这将为您提供要删除的所需编辑器的数组和精确索引的视图。 例如，上述控制台的一个示例输出可以是：
Array[2] 0:B 1:B length:2 textarea-1:B textarea-2:B _proto_Array[0]
当我在textareas上有两个tinymce编辑器时，这是控制台的输出：＃textarea-1和＃textarea-2假设我想删除＃textarea-2并重新添加它然后可以按如下方式完成：
tinymce.EditorManager.editors.splice(1, 1);//removing second element in array. delete tinymce.EditorManager.editors['textarea-2'];//deleting respective textarea id from array
然后你可以使用init再次添加它：
tinymce.init({ selector:'#ts-textarea-2' });
如果你只有一个textarea关联tinymce编辑器，请说：＃textarea-1，你想删除并重新初始化它然后你可以通过以下方式清空tinymce.EditorManager.editors：
tinymce.EditorManager.editors = [];
然后你可以使用init命令添加，如上所述。 为我工作没有任何错误。
我希望它有所帮助
这似乎是一个时间问题。 我正在寻找一个事件监听器类型的东西，而不是一个计时器，但当我包装我的初始化函数，它正常工作。 我在这里发现了这篇文章的提示： http ： //www.tinymce.com/forum/viewtopic.php？id = 32661
tinyMCE.execCommand('mceRemoveEditor', false, 'editorId'); setTimeout(function() { tinyMCE.init(myconfig); }, 3000);
需要清除旧的tinymce实例。 以下代码为我工作
tinymce.EditorManager.editors = []; //我们需要删除旧实例。
//将“关于”部分设置为TinyMCE编辑器。 tinymce.init（{selector：’textarea’，skin_url：’/ packages / teamon_tinymce / skins / lightgray’，menubar：false，toolbar：’insert | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist’，}）; tinymce.get（ ‘pageContent’）setContent（page.content）。
希望这将是解决这个问题的更完整的指南。
console.log("before remove") //capture the editorId from this (id: ) console.log(tinymce.EditorManager.editors); //remove instance tinymce.execCommand('mceRemoveEditor', true, "editorId"); //add to the DOM the html to whom you will apply tinymce $("#emailEditor").append(html); console.log("before add") console.log(tinymce.EditorManager.editors); //add instance tinymce.EditorManager.execCommand('mceAddEditor', false, "editorId"); //init tinymce initTinyMce(); //be sure to add the init_instance_callback part function initTinyMce() { console.log("init tinymce") tinymce.init({ //script_url: '~/Scripts/tinymce/jquery.tiny_mce.js', selector: "textarea#editorId", // General options mode: "textareas", theme: "modern", // Theme options theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage", theme_advanced_toolbar_location: "top", theme_advanced_toolbar_align: "left", theme_advanced_statusbar_location: "bottom", theme_advanced_resizing: true, init_instance_callback: function (editor) { var currentEditor = editor.editorContainer; $(currentEditor).show(); } }); }