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

时间:2015-11-12 09:51:42

标签: javascript jquery html ajax tinymce-4

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

情况是这样的:

我有一个带有多个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 !!

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

1 个答案:

答案 0 :(得分:2)

您应该在添加新编辑器之前删除编辑器...如果我正确地阅读了您的代码,您就是在创建编辑器之后立即删除编辑器。

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

我首先从#SerenePageEditors中删除任何编辑器,然后再替换HTML内容。可能有一个如下所示的电话:

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

        });
    });
}