在AJAX中重新初始化TinyMCE 4

Question

我在启用了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");
}); 

Answer 1

这里的问题是关闭盒子而不正确关闭内部的tinymce实例将导致第二次不显示编辑器(因为变量window.tinymce.editors中仍然存在一个tinymce编辑器对象).

解决方案:onclose(实际上在销毁或删除之前)关闭了编辑器.

Answer 2

删除现有的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]

当我在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,那就说:#textarea-1你想删除并重新初始化它然后你可以通过以下方式清空tinymce.EditorManager.editors:

tinymce.EditorManager.editors = [];

然后您可以使用init命令添加,如上所述.为我工作没有任何错误.

我希望它有所帮助