IE11下，CKEditor在Bootstrap Modal中的下拉問題

原問題解決方案連接：

 

最近在項目中須要在Bootstrap Modal彈出框中載入CKEditor。

初始化CKEditor之後，在IE11下，格式/字體/顏色的下拉會閃現一下後就消失，但在chrome和firefox下沒問題。

主要緣由是IE11下，點擊CKEditor，觸發了focusin.modal事件，原modal enforceFocus函數的if條件成立，bootstrap modal獲取焦點，CKEditor下拉失去焦點，因此下拉出現閃現。

Google了之後找到了一個解決方案，http://ckeditor.com/forums/CKEditor/Editor-Dropdowns-dont-work-in-IE11

這個解決方案中，加了判斷後，能夠避免modal獲取焦點，但好像modal一直都不會trigger了。

 

我作了一下修改，如下代碼是在原modal enforceFocus函數的基礎上添加了!$(e.target.parentNode).closest(".cke").length判斷條件，也就是說在原判斷條件+未點擊在CKEditor上，則modal獲取焦點。

代碼的執行順序是jQuery、bootstrap再執行此段代碼。

$.fn.modal.Constructor.prototype.enforceFocus = function() {
    $(document)
      .off('focusin.bs.modal')
      .on('focusin.bs.modal', $.proxy(function (e) {
        if (document !== e.target &&
            this.$element[0] !== e.target &&
            !this.$element.has(e.target).length &&
            !$(e.target.parentNode).closest(".cke").length) {
            
            this.$element.trigger('focus')
        }
      }, this))
};

在項目中測試了一下未發現問題。

 

附 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對象。