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

Question

与此同时，我已经走得更远了。但是，我仍然遇到一个问题。

情况是这样的:

我有一个包含多个文本区域的 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!!

附言[@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

        });
    });
}