CKEditor + Fancybox = FAIL?

Question

CKEditor + Fancybox, кажется, работает, ЕСЛИ скрипты загружаются ТОЛЬКО на страницу, открытую Fancybox.Однако если родительская страница инициализировала CKEditor, любые открытые страницы Fancybox с CKEditors на них НЕ будут работать сразу.

Каждый экземпляр имеет уникальный идентификатор.

Редактор появляется, но содержимоепусто, и не может быть нажата в.Нажатие SOURCE и других кнопок часто вызывает полную функциональность.

Я пытался добавить CKEDITOR.replaceAll(); к обратному вызову Fancybox afterShow(), не повезло.

Кому-нибудь повезло, если вы сделали это?

Answer 1

Старый вопрос, но только для справки, так как эта проблема сохраняется в текущих версиях обоих модулей.

Лучший способ обойти это, как мне кажется, состоит в том, чтобы создать элемент ckeditor только после небольшого тайм-аута.

Так что в этом примере страница .html имеет текстовую область с идентификатором 'ckeditor-textara'. Задерживая дробь, я могу заставить свою текстовую область рендериться более надежно. (компромисс - лишь небольшая задержка доступности ckeditor)

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

Fancybox не очень хорошо играет с ck; я думаю, потому что это делает кучу копирования контента ajax, который портится с DOM (хотя я не потратил слишком много времени, чтобы проверить это как точную причину) Задержка ckeditor до тех пор, пока onComplete не закончил, работает намного лучше.

Answer 2

В основном события DOM перезаписываются, поэтому вам нужно использовать setTimeout в afterLoad для решения проблемы:

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

Answer 3

$('a.fancybox').fancybox({
    parent: "body",
    afterLoad       :   function() {
        var editor = CKEDITOR.instances['post_body'];
        if(editor){
            CKEDITOR.instances['post_body'].destroy();
        }
        CKEDITOR.replace('post_body');
    },
    beforeLoad  :   function() {
    },
    beforeClose : function () {
        CKEDITOR.instances['post_body'].destroy();
    }
});

post_body - это идентификатор вашей текстовой области