Bootstrap with CKEditor equals problems

Question

I'm trying to create a Bootstrap modal which contains an instance of CKEditor, but there are a lot of problems...

So basically the fields are left unenabled, they don't look like, but I can't interact with them. Does anybody have a solution to this strange behavior?

Answer 1

FWIW, I couldn't get Peter's solution to work, but the following worked for me, and still keeps the hack in a separate file so you don't have to edit any Bootstrap source files:

// bootstrap-ckeditor-modal-fix.js
// hack to fix ckeditor/bootstrap compatiability bug when ckeditor appears in a bootstrap modal dialog
//
// Include this AFTER both bootstrap and ckeditor are loaded.

$.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 
    && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') 
    && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
      modal_this.$element.focus()
    }
  })
};

Answer 2

I'm using CKEditor in the React-Boostrap Modal. And I faced the focus issue in the Wiris Mathtype editor. I tried this below two methods that solved my problem.

Paste this below script when the Modal component loads

document.getElementsByClassName('modal')[0].removeAttribute('tabindex')

or

Add this attribute to the Modal Component

enforceFocus={false}