13

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

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

4

9 回答 9

27

FWIW，我无法让Peter 的解决方案正常工作，但以下内容对我有用，并且仍然将 hack 保存在单独的文件中，因此您不必编辑任何 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()
    }
  })
};
于 2013-09-01T01:32:36.730 回答
13

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

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

于 2015-01-06T01:06:03.760 回答
5

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

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

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

于 2017-09-27T07:59:41.730 回答
3

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

我查看了 Bootstrap 模态（未缩小）代码，以找到在 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'), $ )
于 2013-05-31T20:42:42.643 回答
1

嘿，我遇到了这些问题。我发现这张票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')){

这允许选择和输入一样可用，尽管重复选择器有点笨拙，但它确实修复了错误。希望这对您有所帮助。

于 2013-02-22T14:27:12.640 回答
1

bootstrap modal 的 z-index 高于 ckeditor 面板的 z-index。因此，我发现的另一种解决方案是增加 ckeditor 的 z-index。将以下行添加到 ckeditor config.js

// app/assets/javascripts/ckeditor/config.js
config.baseFloatZIndex = 1E5;
于 2016-04-27T10:43:04.450 回答
1

我在React-Boostrap Modal中使用 CKEditor 。我在 Wiris Mathtype 编辑器中遇到了焦点问题。我尝试了以下两种方法来解决我的问题。

当 Modal 组件加载时粘贴下面的脚本

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

或者

将此属性添加到模态组件

enforceFocus={false}
于 2021-04-26T08:48:42.867 回答
0

工作示例在这里：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()
                }
            })
        };
于 2014-05-15T00:04:29.930 回答
0

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()
    }
  })
};

这对我有用。

于 2016-03-31T21:25:05.680 回答