CKEditor + Fancybox = FAIL?

Question

CKEditor + Fancybox seems to work IF the scripts are loaded ONLY on the page opened by Fancybox. If, however, the parent page has initialized CKEditor, any Fancybox opened pages with CKEditors on them will NOT immediately work.

Each instance has a unique ID.

The editor appears, but the content is blank, and can't be clicked into. Clicking SOURCE and other buttons often triggers full functionality.

I've tried adding CKEDITOR.replaceAll(); to the Fancybox afterShow() callback, no luck.

Anyone have any luck doing this?

Answer 1

Old question, but just for reference as this issue still persists in current versions of both modules..

The best way to get around this i find is to create the ckeditor on the element only after a small timeout.

So in this example the .html page has a text area with id of 'ckeditor-textara'. By delaying a fraction, i can get my text area to render way more reliably. (the trade off is just the slight delay in availability of the ckeditor)

$.fancybox({
            'type' : 'ajax',
            'autoDimensions' : true,
            href : '/scat-porn.html',
            onComplete : function () {
                setTimeout(function() {
                    CKEDITOR.replace( 'ckeditor-textarea',
                    {
                        toolbar : 'Basic',
                        mode : 'wysiwyg'
                    });
                }, 500);
            },
            ...
            });

Fancybox does not play nice with ck; i think because it does a bunch of copying of the ajax content which messes with the DOM (though i have not spent too much time verifying that as the exact cause). By delaying the ckeditor until after the onComplete has finished things work out a lot better.

Answer 2

Basically the DOM events are being overwritten so what you need to do is use a setTimeout on the afterLoad to fix the problem:

//all your existing stuff goes here...
$("#id_of_fancybox_thingy").fancybox({
    afterLoad:function(){
        setTimeout(function(){
        if (CKEDITOR.instances['elementname']) {
                CKEDITOR.instances['elementname'].destroy();
                delete CKEDITOR.instances['elementname'];
            }
            CKEDITOR.replace('elementname');
        }, 1000);
    }
});