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

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

3 个答案: