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!!

P.S。 [@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

        });
    });
}

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

TinyMCE disappears after reinitialization in AJAX loaded DIV

html

javascript

ajax

jquery

tinymce-4