使用CKEditor的Bootstrap等于问题

Question

我正在尝试创建一个包含CKEditor实例的Bootstrap模式,但是存在很多问题......

所以基本上这些字段都没有用,它们看起来不像,但我无法与它们互动.有没有人能解决这种奇怪的行为？

Answer 1

FWIW,我无法让Peter的解决方案工作,但以下工作对我有用,并且仍然将黑客保存在一个单独的文件中,因此您不必编辑任何Bootstrap源文件:

// 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

我刚从tabindex模态容器中删除了该属性,这似乎为我解决了这个问题.

胖子在这里建议:https://github.com/twbs/bootstrap/issues/6996

Answer 3

如果以上所有解决方案都不适合您，请尝试以下操作：

   $('#myModal').on('shown.bs.modal', function() {
        $(document).off('focusin.modal');
    });

它立即对我有用。这是来源：tobiv 的答案 - github