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. :-)

Is your Ajax call returning multiple editor fields, or just the new one? — Joshua Morgan, Nov 20 '15 at 17:10

score 2 · Accepted Answer · answered Nov 14 '15 at 13:46

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

        });
    });
}

What I get when using this code is : ReferenceError: tinymce is not defined — Alex, Nov 14 '15 at 16:09
Further I use TinyMCE 4.x tinymce.remove('#SerenePageEditors .EditorField'); I believe this will not work and should be tinyMCE.execCommand right? — Alex, Nov 14 '15 at 16:10
Depends on the particulars of your setup. I'm basing myself on TinyMCE 4.x docs http://www.tinymce.com/wiki.php/api4:method.tinymce.remove.static . If you have a live link where your code is running, I could see in proper context. If your `execCommand` call to mceRemoveEditor is correct (from what I see, it does not seem to match the documentation and seems to target only editors nodes with id `WysyWyg`, but I could be wrong there), you can always try calling it **before** adding new editors. — Eric Maziade, Nov 14 '15 at 16:38

TinyMCE disappears after reinitialization in AJAX loaded DIV

1 Answers1