使用CKEditor的Bootstrap等于问题

Question

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

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

Answer 1

FWIW，我无法让Peter's solution工作，但以下对我有用，并且仍然将黑客保存在一个单独的文件中，因此您不必编辑任何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

我没有弄乱Bootstrap源，而是重新附加了焦点事件处理程序。

我查看了Bootstrap Modal（未编译）代码，在Modal.enforceFocus（）下查找定义事件处理程序的位置：

var that = this
$(document).on('focusin.modal', function (e) {
  if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
    that.$element.focus()
  }
})

然后我向CKEditor添加了一个修改了这个函数的方法。你可以把它放在任何地方;也许在一个文件中仅用于CKEditor覆盖。

CKEDITOR.bootstrapModalFix = function (modal, $) {
  modal.on('shown', function () {
    var that = $(this).data('modal');
    $(document)
      .off('focusin.modal')
      .on('focusin.modal', function (e) {
        // Add this line
        if( e.target.className && e.target.className.indexOf('cke_') == 0 ) return;

        // Original
        if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
          that.$element.focus()
        }
      });
  });
};

所以现在，如果我知道我要在Bootstrap模式中加载CKEditor，我会调用这个方法，假设jQuery是$：

CKEDITOR.bootstrapModalFix( $('#myModal'), $ )

Answer 4

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

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

它立即对我有用。这是来源：tobiv's answer - github

Answer 5

嘿，我遇到了这些问题。我发现这张票https://github.com/twitter/bootstrap/issues/6996似乎已经解决了输入问题对我来说无法选择。我将此票证的更改扩展为：

if (that.$element[0] !== e.target && !that.$element.has(e.target).length && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')){

这允许选择使用以及输入，虽然重复选择器有点janky它确实修复了错误。希望这对你有所帮助。

Answer 6

bootstrap模态的z-index高于ckeditor面板的z-index。所以我找到的替代解决方案是增加ckeditor的z-index。将以下行添加到ckeditor config.js

// app/assets/javascripts/ckeditor/config.js
config.baseFloatZIndex = 1E5;

Answer 7

工作示例在这里：http://jsfiddle.net/pvkovalev/4PACy/

        $.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
                // add whatever conditions you need here:
                &&
                !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
                    modal_this.$element.focus()
                }
            })
        };

Answer 8

Bootstrap将focusin.modal更改为shown.bs.modal

 $.fn.modal.Constructor.prototype.enforceFocus = function() {
  modal_this = this
  $(document).on('shown.bs.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()
    }
  })
};

这对我有用。