在AJAX中重新初始化TinyMCE 4



我在启用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数组。此解决方案适用于以下两种情况:

  1. 如果您只有一个编辑器,并且希望删除并重新添加它
  2. 如果你有多个编辑器,并且你想删除一些特殊的编辑器并重新添加它
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#删除

相关内容

  • 没有找到相关文章

最新更新