CKEditor on Modal答案

【问题标题】：CKEditor on ModalCKEditor on Modal
【发布时间】：2015-12-04 09:22:55
【问题描述】：

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

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

我对 CkEditor 使用标准初始化

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

【问题讨论】：

你试过CKEDITOR.instances.ckwys.focus(); ??
否... 仅在 ckeditor 的插件中存在问题。在 textarea 中设置焦点。如果我打开插件搜索（例如）。字段搜索没有焦点...如果我单击搜索字段。 focus 停留在文本区域上。////
我无法理解问题所在。你能在 jsfiddle 中展示它吗？
好吧..我创建了小提琴jsfiddle.net/axfzaht9我把ckEditor放到了弹出窗口..如果你打开这个弹出窗口并点击插件按钮prntscr.com/9ba5j2并且这个字段prntscr.com/9ba5ye是不活动的。！！！
看起来焦点在 Firefox 上有效，但在 Chrome 上无效...

标签： ckeditor

【解决方案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()
    }
})

};

这段代码解决了我的问题。

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

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

【讨论】：