Не могу набрать в CKeditor с fancybox - PullRequest
Новая
       21

Не могу набрать в CKeditor с fancybox

3 голосов
/ 28 ноября 2011

Это код, который я использовал для реализации отредактированной версии CKeditor в своем проекте cakephp. 

<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 в своем проекте во многих местах ... но в этом месте я не могу набратьв текстовых полях.

Ответы [ 3 ]

1 голос
/ 29 апреля 2013

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

$("#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);
    }

});
0 голосов
/ 31 мая 2012

Это просто расширение предыдущего постера, который указал на недоступность элементов DOM из-за клонирования содержимого Fancybox:

Один из вариантов может быть добавить его после завершения 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

Надеюсь, это поможет.

0 голосов
/ 13 декабря 2011

Проблема может заключаться в том, что Fancybox клонирует то, что вы даете ему в качестве его содержимого, что означает, что все обработчики событий исходных элементов DOM потеряны.Другими словами, если у вас есть элемент HTML <span> и вы зарегистрировали обработчик событий, например: 

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

, и вы хотите показать это <span> внутри Fancybox, затемего щелчок, вы не получите никакого сообщения.

...