我在启用ajax的Foundation Reveal框中使用TinyMCE。现在TinyMCE在第一次加载时启动,但如果我关闭盒子并再次打开它,它不会触发:(
我有其他脚本,比如在完全相同的fore查询中触发的selected和masked输入,但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");
});
2020更新
要删除现有的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]
当我在文本区域上有两个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'
});
如果你只有一个与tinymce编辑器相关的文本区域,比如:#textarea-1,并且你想删除并重新初始化它,那么你可以清空它tinymce。EditorManager.editors by:
tinymce.EditorManager.editors = [];
然后您可以使用init命令添加,如上所述。为我工作,没有任何错误。
我希望它能帮助
这里的问题是,关闭框而不正确关闭内部tinymce实例将导致第二次不显示编辑器(因为变量窗口.tinymce.editors中仍有一个tinymce编辑器对象)。
解决方案:盒子的onclose(实际上是在销毁或移除之前)关闭了编辑器。
这似乎是一个时间问题。我正在考虑做一个事件侦听器类型的事情,而不是定时器,但当我包装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({选择器:'文本区域',skin_url:'/packages/teamon_tinymce/skins/lightgray',菜单栏:false,工具栏:"insert | bold italic | alignleft alignenter 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();
}
});
}
这解决了我的问题:
// Remove all editors bound to divs
tinymce.remove('div');
// Remove all editors bound to textareas
tinymce.remove('textarea');
// Remove all editors
tinymce.remove();
// Remove specific instance by id
tinymce.remove('#id');
https://www.tiny.cloud/docs/api/tinymce/root_tinymce/?_ga=2.143898737.597721600.1600176559-1290517464.1591019990#删除