Question

我在模态上有一个CkEditor 4.x ..我尝试模态jQueryUI和Bootstrap模态。

当我在模态中显示Ckeditor时，当我使用其插件时，插件的字段没有焦点，我无法通过点击进行设置。 enter link description here。如果我在身体中初始化CkEditor，那么一切正常。但如果在modal.then失去焦点

我对CkEditor使用标准初始化

self.ckwys = CKEDITOR.replace('wysivgBlock', {
   height: 300
});

Answer 1

$.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 2

这适用于jqueryUI

  var orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
                $.ui.dialog.prototype._allowInteraction = function (event) {
                    if ($(event.target).closest('.cke_dialog').length) {
                        return true;
                    }
                    return orig_allowInteraction.apply(this, arguments);
                };

我在enter link description here

找到了解决方案

Answer 3

由于您使用的是Bootstrap模式，因此可以尝试从tabindex="-1"中删除modal fade。
找到了此解决方案here。

模态上的CKEditor

3 个答案: