CKEditor 4 - 链接对话框在twitter bootstrap模式下不起作用

Question

我在twitter bootstrap模式中有一个CKEditor实例，它运行得很好，除了当你尝试使用带有文本框或下拉列表的对话框时它无法访问。

我想知道是否有其他人有这样的问题，并找到了一种方法使其工作。

谢谢

编辑：

我做了一些挖掘，发现了一个解决问题的hack。

Answer 1

只需把它放在Bootstrap脚本之后，所有问题都将修复

<script>
     //The final solution code for all bugs ckeditor in twitter bootstrap3' modal
     $.fn.modal.Constructor.prototype.enforceFocus = function() {
             var $modalElement = this.$element;
             $(document).on('focusin.modal',function(e) {
                     var $parent = $(e.target.parentNode);
                     if ($modalElement[0] !== e.target
                                     && !$modalElement.has(e.target).length
                                     && $(e.target).parentsUntil('*[role="dialog"]').length === 0) {
                             $modalElement.focus();
                     }
             });
     };
</script>

Answer 2

只需在引导模式中从此行中删除tabindex="-1"。

<div class="modal fade" tabindex="-1" role="dialog">

Source

注意

请注意接受的答案，因为它可能会使您的浏览器崩溃。

如果从另一个模态打开模态，则接受的答案将创建一个无限循环，使整个页面崩溃。

Answer 3

我用this script解决了这个问题

// 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.
// From: http://stackoverflow.com/questions/14420300/bootstrap-with-ckeditor-equals-problems
// Author: http://stackoverflow.com/users/185839/aaron

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

如果你的引导版本高于3.3.4，你应该使用modal_this.$element.blur()而不是modal_this.$element.focus()