码迷,mamicode.com
首页 > 其他好文 > 详细

IE11下,CKEditor在Bootstrap Modal中的下拉问题

时间:2017-06-26 17:10:59      阅读:370      评论:0      收藏:0      [点我收藏+]

标签:tin   添加   div   字体   ckeditor   set   parent   str   init   

原问题解决方案链接:http://ckeditor.com/forums/CKEditor/Editor-Dropdowns-dont-work-in-IE11

 

最近在项目中需要在Bootstrap Modal弹出框中载入CKEditor。

初始化CKEditor以后,在IE11下,格式/字体/颜色的下拉会闪现一下后就消失,但在chrome和firefox下没问题。

Google了以后终于找到解决方法。

以下代码添加了$(e.target.parentNode).hasClass(‘cke_contents cke_reset‘)判断条件,放在项目的common.js中。

$.fn.modal.Constructor.prototype.enforceFocus = function() {
    modal_this = this
    $(document).on(‘focusin.modal‘, function (e) {
        if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
            // Fix for CKEditor + Bootstrap IE issue with dropdowns on the toolbar
            // Adding additional condition ‘$(e.target.parentNode).hasClass(‘cke_contents cke_reset‘)‘ to avoid setting focus back on the modal window.
            && $(e.target.parentNode).hasClass(‘cke_contents cke_reset‘)) {
                modal_this.$element.focus()
        }
    })
};

 

bootstrap.js中enforceFocus函数代码

Modal.prototype.enforceFocus = function () {
    $(document)
      .off(‘focusin.bs.modal‘) // guard against infinite focus loop
      .on(‘focusin.bs.modal‘, $.proxy(function (e) {
        if (document !== e.target &&
            this.$element[0] !== e.target &&
            !this.$element.has(e.target).length) {
          this.$element.trigger(‘focus‘)
        }
      }, this))
  }

this.$element表示modal对象。

 

IE11下,点击CKEditor,也触发了focusin.modal事件,if条件成立,bootstrap modal获取焦点,CKEditor下拉失去焦点,所以下拉出现闪现。

加了判断后,可以避免modal获取焦点,但好像modal一直都不会trigger了

 

IE11下,CKEditor在Bootstrap Modal中的下拉问题

标签:tin   添加   div   字体   ckeditor   set   parent   str   init   

原文地址:http://www.cnblogs.com/yulj/p/7081092.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!