当前位置：文江博客话题详情

CKEditor + Fancybox = 失败？

发布于 2025-01-08 20:10:07 字数 329 浏览 7 评论 0原文

如果脚本仅在 Fancybox 打开的页面上加载，则 CKEditor + Fancybox 似乎可以工作。但是，如果父页面已初始化 CKEditor，则任何 Fancybox 打开的带有 CKEditor 的页面将不会立即工作。

每个实例都有一个唯一的 ID。

编辑器出现，但内容是空白的，无法点击进入。单击 SOURCE 和其他按钮通常会触发完整功能。

我尝试将 CKEDITOR.replaceAll(); 添加到 Fancybox afterShow() 回调，但没有成功。

有人有幸这样做吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苍景流年 2025-01-15 20:10:07

老问题，但仅供参考，因为这个问题在两个模块的当前版本中仍然存在。

我发现解决这个问题的最佳方法是仅在短暂超时后在元素上创建 ckeditor。

因此，在此示例中，.html 页面有一个 id 为“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 配合不佳；我认为是因为它复制了一堆与 DOM 混淆的 ajax 内容（尽管我没有花太多时间来验证其确切原因）。通过将 ckeditor 延迟到 onComplete 完成之后，事情会好得多。

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.

回复收藏 0 原文

恏ㄋ傷疤忘ㄋ疼 2025-01-15 20:10:07

基本上 DOM 事件被覆盖，所以你需要做的是在 afterLoad 上使用 setTimeout 来解决问题：

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

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

回复收藏 0 原文

明天过后 2025-01-15 20:10:07

$('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 - 是您的文本区域 ID

$('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 - is a your text area id

回复收藏 0 原文

~没有更多了~