无法使用 fancybox 输入 CKeditor

Question

这是我用于在我的 cakephp 项目中实现 CKeditor 的编辑版本的代码。

<div style='display:none'>
    <div class="umsg_div" id="umsg_div">
        <?php           
            echo $this->Form->create('Inbox',array('action'=>'private_message_reply','id' => 'form_umsg'));
        ?>

        <ul >           
            <?php echo $this->Form->input('Inbox.to_id',array('type'=>'hidden','value'=>@$message_details['Inbox']['from_id'],'id'=>'to_id')); ?>
            <li><div class="blue_title">Send Private Message</div></li><br/>
            <li>Subject</li>
            <li><?php echo $this->Form->input('Inbox.subject',array('type'=>'text','class'=>'subject','label'=>false));?></li><br/>
            <li>Message</li>
            <li>
                <?php echo $this->Form->input('Inbox.message',array('type' => 'textarea','id'=>'user_message','rows'=>"2",'style'=>'width:130%','label'=>false));?>
                <script language="javascript" type="text/javascript">
                    if (CKEDITOR.instances['user_message']) {                   
                        CKEDITOR.instances.user_message.destroy();
                     }
                     CKEDITOR.replace( 'user_message',{
                                toolbar : 'Basic',
                    });

                </script> 
            </li>
            <li style="text-align:right;padding:10px;"><input type="submit" name="umsg" value="Send" class="normal_button"/> or <a href="#" onclick='return hide_reply();'>Cancel</a></li>
        </ul>
        <?php echo $this->Form->end(); ?>   
    </div>
</div>

我在我的项目中很多地方都使用了 ckeditor...但是在这个地方我无法输入文本字段。

Answer 1

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

$("#id_of_fancybox_thingy").fancybox({

    //all your existing stuff goes here...

    afterLoad:function(){
        setTimeout(function(){

            if (CKEDITOR.instances['elementname']) {
                CKEDITOR.instances['jelementname'].destroy();
                delete CKEDITOR.instances['elementname'];
            }
            CKEDITOR.replace('elementname', { "toolbar": [ [ "Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Print" ], [ "Undo", "Redo", "-", "Find", "Replace", "-", "SelectAll", "RemoveFormat" ], [ "\/" ], [ "Bold", "Italic", "Underline", "Strike", "-", "Subscript", "Superscript" ], [ "NumberedList", "BulletedList", "-", "Outdent", "Indent", "Blockquote" ], [ "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock" ], [ "Link", "Unlink", "Anchor" ], [ "\/" ], [ "TextColor", "BGColor" ], [ "Maximize", "ShowBlocks" ] ], "height": "200", "width": "690" });

        }, 1000);
    }

});

Answer 2

问题可能在于 Fancybox 将您提供的内容克隆为它的内容，这意味着原始 DOM 元素的所有事件处理程序都丢失了。换句话说，如果你有一个 HTML <span> 元素并且你已经在它上面注册了一个事件处理程序，比如：

$(function(){
    $('#span-id').click(function(){
        alert('hello world!');
    });
});

并且您想在 Fancybox 中显示此 <span>，然后单击它，您将不会收到任何消息。

Answer 3

这只是对上一个帖子的扩展，他指出由于 Fancybox 克隆内容而导致 DOM 元素无法访问：

一个选项可能是在 Fancybox 完成后附加它：

$("#stuff").fancybox({
            // [Your settings]
    onComplete : function() {
                // Register your CKeditor here
                if (CKEDITOR.instances['user_message']) {                   
                    CKEDITOR.instances.user_message.destroy();
                 }
                 CKEDITOR.replace( 'user_message',{
                            toolbar : 'Basic',
                });
    }
});

这可能有点骇人听闻，作为免责声明，我从未与 Fancybox 合作过。但这里是回调的 API：http://fancybox.net/api

希望这会有所帮助。