thoughts on why tinyMCE fails to load when launched inside a colorbox lightbox for a 2nd time on the same page

i currently use TinyMCE-Extended inside my tidypics_plus plugin to allow users to comment on pictures from inside a colorbox lightbox. that all works fine, except that when i close the colorbox and open it a second time, i see a fatal error with tinymce and then after that 2nd time, every subsequent opening of the colorbox results in tinyMCE totally failing to load.

tidypics_plus allows the user to change the image being viewed inside the colorbox by clicking a thumbnail for another image and that process reloads the entire content of the colorbox via ajax. when i do that, there is no problem with tinyMCE, so the issue is not that tinyMCE doesn't like being loaded via AJAX. The issue is somehow related to colorbox being opened and closed. I have found pages on stackOverflow that describe similar issues and some said they solved it by adding JS code to manually remove the old tinyMCE instances before instantiating the new ones, however, that has not worked for me yet.

anyone know what the problem is here? (I will open a thread in the tinyMCE support group too).

  • Can you test a modification in mod/tidypics_plus/views/default/js/tidypics_plus/tidypics_plus.js? Try adding the lines in bold:

    navigateImage = function(fromGuid, toGuid)
        {
            if (window.tinymce) {
                tinyMCE.remove();
            }
            elgg.get('ajax/view/tidypics/image_popup', {
                data: {
                    guid: toGuid
                },
                success: function (output) {
                    $('.imagebox-popup #cboxLoadedContent').html(output);
                    $('.imagebox-popup .elgg-slick-slider').removeClass('elgg-state-loading').slick();
                    resizeColorBox();
                    return true;
                }
            });
        }

    This seems to work for me so far.

  • as far as i recall, the navigateImage function is only called when a user changes the image in an already opened album view - so that is not the place where the bug originates. i tested your change but it didn't solve the issue here. however, since you said you weren't seeing the error, i figured that the problem was in my theme plugin and i may have now resolved it by moving some of my code from the colorbox hook from 'complete' to 'open'. i think there may be some other issues remaining, possibly also involving the issues you pointed to with galliComments. i continue!

  • oh, nope - that didn't fix it either.

  • frustratingly, i now have this working on my home pc, but not on the other two servers.. and i have no idea why it works locally..

  • Well, I can only say it works for me with the only change posted above with and without galliComments. I've tried navigation forward/backward, open/closing the popup many times and the editor always showed up (whereas it failed to show already much, much earlier without the change).

  • i am still finding that the code works locally, but not on my remote server. i have disabled most of the plugins on the remote server, but it still doesn't work! i have now put a check for the existence of gallicomments into the jquery for tidypics_plus.. but that is not enough. with or without your code suggestion, the crash always occurs on the 2nd opening of colorbox.
    i have even deleted both extended tinymce and tidypics_plus from my remote server and reuploaded my local versions, but no dice.
     

  • @iionly - i have worked on this today and not got very far. i have converted gallicomments JS to an AMD file and now have a more detailed error message, but ultimately it is not helping me at all.

  • i am now seeing: TypeError: e.replace is not a function

    when i open the popup for the second time and type in the tinymce editor. the editor does at least load reliably now though. from looking in the tinymce code it looks like the value of 'e' is intended to be string, but isn't - which ultimately could be said to be a bug in tinymce.. but i am not 100% sure.

  • JS code of galliComments contains some code that might have been necessary for Tinymce v3.x but is no longer necessary on Tinymce v4.x / might even cause errors. At least it shouldn't be necessary anymore when using Extended Tinymce.

    Remove

    is_tinymce_active = false;
    if ((typeof tinymce != "undefined") && tinymce.activeEditor && !tinymce.activeEditor.isHidden()) {
        is_tinymce_active = true;
    }
    if (is_tinymce_active) {
        tinymce.triggerSave();
    }

    and change

    if (is_tinymce_active) {
        tinymce.activeEditor.setContent('');
    } else {
        form.find('textarea').val('');
    }

    into

    form.find('textarea').val('');