首页 > 代码库 > IE11下，CKEditor在Bootstrap Modal中的下拉问题

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

2024-10-12 06:59:39   216人阅读

原问题解决方案链接：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中的下拉问题


联系
我们