jquery ui的对话框dialog和ckeditor的冲突问题

近日,某项目使用jquery ui的对话框dialog,在弹出的这个对话框中加ckeditor编辑器(结合了ckfinder),发现冲突————当对话框dialog的modal: true的时候,ckeditor编辑器的所有编辑框全都无法获得焦点,不能编辑了。

改变为modal:false , 解决了冲突,可以编辑了。


但是如果不想改变modal这个参数的值,怎么办呢?又多方尝试,搜索他人经验,最后在一台湾程序员的一篇文章提到相同的问题,他是在jquery 的论坛上看到某老外碰到这个问题,然后有一个老外给写了一个补丁,解决了(http://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog)。
(注:该bug的报告地址,附有补丁下载链接http://bugs.jqueryui.com/ticket/4727)

OK,看到这儿,以为没什么事了,下载该补丁,在页面中加载它,刷新,清缓存.......再次测试——————仍然不行!!!
我使用的是jquery-1.7.2.min.js 、jquery-ui-1.10.3.js、ckeditor_4.2.2_full  、ckfinder_php_2.4。
猜测:该老外文章是2009年的,4年前的文章,4年前的jquery ui的版本可能是不一样的,他这个补丁就有用,但是随着时间推移,jquery ui版本升级,他这个补丁也就无效了。
姑且先这样,有时间再详细研究,先记下经过,以备忘。

弹出dialog的代码:

<script>

$(function(){


    $( "#dialog_reply" ).dialog({
    autoOpen: false,                   
    resizable: false,
    width:700,
    height:500,
    modal: false,
    open:function(){
        /* ckeditor编辑器 */
        if( CKEDITOR.instances['answer_content'] ){
            CKEDITOR.remove(CKEDITOR.instances['answer_content']);
        }
        else {
            var editor = CKEDITOR.replace('answer_content' ,  {
                width:980,
                height:200,
                toolbar:
                [
                    ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],
                    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak']
                ]
            });
            CKFinder.setupCKEditor(editor, '/ckfinder/'); //ckfinder总目录的相对路径.
        }
    },
    buttons: {
        " 发 送 ": function() {
            var bValid = true;
            //bValid = bValid && checkRegexp( rule_cat_name, /^\S*$/i, "规则名不能为空." );
            if ( bValid ) {
                $('#form1').submit();
                $(this).dialog("close");
            }
        },
        "关闭": function() {
            $( this ).dialog( "close" );
        }
    },
    close: function() {
        ///
    }
    });


});

</script>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值