Twitter bootstrap 带有CKEditor equals问题的引导

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

---

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

嘿，我遇到了这些问题。我发现这张票似乎解决了我无法选择输入的问题。我把这张票的零钱延长到：

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')){

---

这使得选择和输入都可以使用，尽管重复选择器有点不方便，但它确实修复了错误。希望这对您有所帮助。

我重新连接了焦点事件处理程序，而不是干扰引导程序源代码

我查看了引导模式（unnified）代码，以找到在Modal.enforceFocus（）下定义事件处理程序的位置：

然后，我在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()
        }
      });
  });
};

现在，如果我知道要在引导模式中加载CKEditor，我调用这个方法，假设jQuery是

$

：

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

FWIW，我无法开始工作，但以下内容对我有效，并且仍然将黑客代码保存在一个单独的文件中，因此您不必编辑任何引导源文件：

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

工作示例如下：

---

我刚刚从模式容器中删除了

tabindex

属性，这似乎为我解决了这个问题

---

这是由fat提出的：

引导将focusin.model更改为show.bs.model

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

---

这对我有用。

引导模式的z指数高于ckeditor面板。因此，我找到了另一种解决方案，即增加ckeditor的z索引。将以下行添加到ckeditor config.js

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

---

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

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

---

它立刻对我起了作用。来源如下：

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

当模态组件加载时，将此脚本粘贴到下面

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

或

将此属性添加到模态组件

enforceFocus={false}

---

我有一个类似的问题-工具栏按钮工作，但其中的文本字段是不可编辑的！你找到解决办法了吗？我见过一些z-index黑客，但似乎都不起作用。为什么不使用原始修复程序

hasClass（'cke'）

？任何想要解决此问题的人都应该使用Peter的答案，而不是我建议的答案，因为这意味着你不必修改源代码。谢谢。伟大的解决方案）适用于4.5.5和Boostrap 2.x。谢谢！：）曾为Bootstrap 3.3.2和CKEditor 4.6.1工作。谢谢：）在应用.js破解之前，请向下滚动到@andrew kapunin answer。一个快速的测试表明，删除

tabindex

的简单标记更改可能就是所需的全部。这是引导的最佳和最简单的解决方案。只需从模式属性中删除“tabindex=“-1””。太棒了，除了这一个，没有一个解决方案对我有效。。。感谢分享。更新：这将覆盖tabindex=“-1”。

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

enforceFocus={false}