在AJAX加载的DIV中重新初始化后,TinyMCE消失

Question

我在平均时间里得到了更多.然而,我仍然有一个问题.

情况是这样的:

我有一个带有多个textareas的div,它们正在加载JQuery AJAX调用.

初始初始化使用以下代码很好:

function InitializeTinyMCE() {

/// This can also be positioned outside a function in the document ready section
$.get("[@appbase]sereneadmin/pages/?SetAjaxCall=editor&page=[@editparam]", function (EditorHTML) {
    $("#SerenePageEditors").html(EditorHTML).find('.EditorField').tinymce({
        script_url: '[@appbase]script/tinymce/js/tinymce/tinymce.jquery.min.js',
        plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "emoticons template paste textcolor colorpicker textpattern imagetools"
        ],

        content_css: '[@appbase]app/template/css/bootstrap.min.css, [@appbase]app/template/css/div.highlighting.css'    // includes both css files in header

    });
    tinyMCE.execCommand('mceRemoveEditor', true, '#WysyWig');
    tinyMCE.execCommand('mceAddEditor', false, '#WysyWig');
});


}

但是在通过onclick添加另一个额外的编辑器之后,AJAX调用完美地执行并且编辑器被添加到数据库中,几乎所有内容都运行正常......除了...... TinyMCE编辑器消失了.

我做了一些搜索,我发现的第一件事我没有删除编辑器.因为这需要在重新初始化之前完成.

所以我补充说:

    tinyMCE.execCommand('mceRemoveEditor', true, '#WysyWig');

不幸的是,这没有任何区别.所以我可能错了.

我正在使用TinyMCE 4.0

我希望有人看到我的错误,我们可以继续旅程.TIAD!

PS [@appbase]正在被PHP取代,以显示脚本的绝对路径.:-)

Answer 1

您应该在添加新编辑器之前删除编辑器...如果我正确地阅读了您的代码，那么您将在创建编辑器后立即尝试删除它们。

由于.get()是异步的，因此删除可能会在创建之前发生，但这不是我们的目标。

在替换 HTML 内容之前，我首先从 #SerenePageEditors 中删除所有编辑器。可能会出现如下所示的调用：

tinymce.remove('#SerenePageEditors .EditorField');

应用于您的代码，它看起来像这样：

function InitializeTinyMCE() {
    /// This can also be positioned outside a function in the document ready section
    $.get("[@appbase]sereneadmin/pages/?SetAjaxCall=editor&page=[@editparam]", function (EditorHTML) {

        tinymce.remove('#SerenePageEditors .EditorField');

        $("#SerenePageEditors").html(EditorHTML).find('.EditorField').tinymce({
            script_url: '[@appbase]script/tinymce/js/tinymce/tinymce.jquery.min.js',
            plugins: [
                "advlist autolink lists link image charmap print preview hr anchor pagebreak",
                "searchreplace wordcount visualblocks visualchars code fullscreen",
                "insertdatetime media nonbreaking save table contextmenu directionality",
                "emoticons template paste textcolor colorpicker textpattern imagetools"
            ],

            content_css: '[@appbase]app/template/css/bootstrap.min.css, [@appbase]app/template/css/div.highlighting.css'    // includes both css files in header

        });
    });
}