CKEditor 5 弹出控件在 Bootstrap 3 - 2018 中不起作用

Question

我遇到的问题似乎与此类似：How to use CKEditor in a Bootstrap Modal? 但接受的答案不适用于以下内容：

• CKEditor 5, v1.11.1
• jQuery 3.2.1
• 引导程序 3.3.7

我创建了一个小提琴来显示这个问题：http : //jsfiddle.net/fg3va7zq/2/

如果您单击“启动模态”，它将打开模态。尝试插入链接时，我得到了这个：

我无法在输入内部单击以插入链接。

以下 CSS 用于确保z-index链接输入的 位于模态上方：

.ck-rounded-corners .ck.ck-balloon-panel, .ck.ck-balloon-panel.ck-rounded-corners {
    z-index: 10055 !important;
}

这是有效的，没有它链接框甚至不可见。

在链接的答案中提供了以下 js：

$.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
            // add whatever conditions you need here:
            &&
            !$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {
            $modalElement.focus()
        }
    })
};

这不能解决问题，如更新的小提琴所示：http : //jsfiddle.net/fg3va7zq/3/

有谁知道如何解决这一问题？关于这个主题的其他 SO 帖子（其中大部分是几年前的）没有解决这个问题，所以我把它作为一个新问题打开了。

Answer 1

查看更新以获取完整详细信息

好吧，我很惊讶我找到了这个问题的解决方案，但我不知道这是如何或为什么工作的，所以请不要问我，否则我将不得不寻找原因部分的实际答案。（“为什么？”的答案在下面）

只需$modalElement.focus()从添加的函数中删除，记下，你不能删除整个函数，因为如果你这样做它将无法工作，你需要保持这种方式并且只删除 .focus() 部分。

$.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 &&
            !$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {
            
        }
    })
};

你可以在这个小提琴中看到它的工作：http : //jsfiddle.net/fg3va7zq/4/

正如我所说，我不知道它为什么会起作用，或者它是否会破坏其他东西，但它起作用了:)

更新

为什么有效？

它不起作用，因为当您在模型内部单击时，焦点正在转移到模型元素本身，因此每次单击 url 元素时，您都将焦点从 URL 元素移出并集中在父模型元素上。

对此的实际解决方法是关注被点击的元素，而不是它自己的模型e.target.focus()，如下所示：

$.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 &&
            !$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {
            e.target.focus()
        }
    })
};

更新 2

为什么删除整个功能后它不起作用？

当您设置原型时，您基本上覆盖了默认情况下引导程序具有的功能，引导程序功能基本上专注于单击某些内容时的模型，这就是您设置的第一个功能所做的。

所以当你用一个什么都不做的函数覆盖这个函数时，它什么都不做（它没有关注模型，而是专注于点击的元素）