在 AJAX 中重新初始化 TinyMCE 4

Question

我在 ajax 启用的 Foundation Reveal 框中使用 TinyMCE。现在 TinyMCE 在它第一次加载时启动，但如果我关闭盒子并再次打开它就不会触发 :(

我在完全相同的 fore 查询中触发了其他脚本，如 chosen and masked input，但是当我第二次重新加载它时，TinyMCE 不会重新初始化

这是我目前正在按照 this question:

上的建议尝试的代码

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

Answer 1

这里的问题是没有正确关闭内部tinymce实例就关闭盒子会导致第二次不显示编辑器（因为变量window.tinymce.editors中还有一个tinymce编辑器对象）。

解决方案：onclose（实际上是在销毁或删除之前）关闭编辑器。

Answer 2

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]

这是当我在 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'
});

如果您只有一个与 tinymce 编辑器关联的文本区域，可以说：#textarea-1 并且您想要删除并重新初始化它，那么您可以清空 tinymce.EditorManager.editors 来自：

tinymce.EditorManager.editors = [];

然后你可以使用上面解释的init命令添加。为我工作没有任何错误。

希望对你有帮助

Answer 3

这似乎是一个时间问题。我正在考虑做一个事件侦听器类型的事情而不是计时器，但是当我包装我的 init 函数时，它可以正常工作。我在这里 post 找到了提示：http://www.tinymce.com/forum/viewtopic.php?id=32661

tinyMCE.execCommand('mceRemoveEditor', false, 'editorId');
setTimeout(function() {
    tinyMCE.init(myconfig);
}, 3000);

Answer 4

需要清除旧的tinymce实例。以下代码对我有用

tinymce.EditorManager.editors = []; //我们需要删除旧实例。

//将 "About" 部分设置为 TinyMCE 编辑器。 tinymce.init({ 选择器：'textarea'， skin_url: '/packages/teamon_tinymce/skins/lightgray', 菜单栏：假的，工具栏：'insert | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist'， }); tinymce.get('pageContent').setContent(page.content);

Answer 5

希望这将是解决此问题的更完整指南。

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();
        }
    });
}

Answer 6

这解决了我的问题：

// 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#remove

在 AJAX 中重新初始化 TinyMCE 4

Reinitialize TinyMCE 4 in AJAX

ajax

jquery

tinymce-4

2020 更新