TinyMCE disappears after reinitialization in AJAX loaded DIV

Question

I have gotten a lot further in the mean time. There is however an issue I am still having.

The situation is like this :

I have a div with multiple textareas that are being loaded with an JQuery AJAX call.

The initial initialization works great using the following code :

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');
});


}

But after adding another extra editor by an onclick the AJAX call gets performed perfectly and the editor gets added in the database and almost everything runs fine... except... The TinyMCE editors disappear.

I have done some searching and the first thing I found out that I did not do was removing the editor. Because this needs to be done before reinitializing it.

So I added :

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

Unfortunately this did not make any difference. So possibly I am using it wrong.

I am using TinyMCE 4.0

I hope someone sees my error and we can continue the Journey. TIAD!!

P.S. The [@appbase] is being replaced by PHP to display the absolute path to the script. :-)

Answer 1

You should remove the editors before adding the new ones... if I read your code right, you are trying to remove editors right after having created them.

Since .get() is asynchronous, the removal might happen before they are created, but that's not what we'd be aiming for.

I'd start by removing any editors from within the #SerenePageEditors before replacing the HTML content. Probably with a call that looks like the following:

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

Applied on your code, it would look like this:

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

        });
    });
}