Javascript CKEditor 5弹出控件在引导3-2018中不工作

我遇到的问题似乎与此类似：但公认的答案与以下情况不符：

• CKEditor 5，v1.11.1
• jquery 3.2.1
• 引导程序3.3.7

我制作了一把小提琴来展示这个问题：

如果单击“启动模式”，将打开模式。尝试插入链接时，我得到以下信息：

我无法在输入中单击以插入链接

以下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()
        }
    })
};

这并不能解决问题，如更新的小提琴上所示：

---

有人知道如何解决这个问题吗？关于这个主题的其他SO帖子（大多数都有几年的历史）没有解决这个问题，所以我把它作为一个新问题打开了。

您是否尝试过将cdn纳入其中

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

还有一些功能需要在.js上初始化

以下代码将启用文档中的所有弹出窗口：

范例

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});
</script>

$（文档）.ready（函数（）{
$（'[data toggle=“popover”]'）。popover（）；
});

从府绸

注意：必须使用jQuery初始化弹出框：选择指定的 元素并调用popover（）方法

有关详细信息，请参阅更新

嗯，我很惊讶我找到了这个问题的解决方案，但我不知道这是如何或为什么工作，所以请不要问我，否则我将不得不寻找一个真正的答案，为什么部分

只需从添加的函数中删除

$modalElement.focus（）

，请注意，您无法删除整个函数，因为这样做将无法工作，您需要保持这种方式，只删除.focus（）部分

你可以在这把小提琴上看到它的工作原理：

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

更新

为什么有效

它不起作用，因为当您在模型内部单击时，焦点会转移到模型元素本身，因此每次单击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

为什么当整个功能被删除时它不工作

当您设置原型时，您基本上覆盖了bootstrap的默认功能，当单击某个对象时，bootstrap功能基本上关注于模型，这就是您设置的第一个功能所做的

---

因此，当您用一个不做任何事情的函数覆盖函数时，它什么也没做（它没有关注模型，而是关注单击的元素）

使用这些选项修复问题：

$( '#yourModal' ).modal( {
   focus: false,

   // do not show modal when innitialized.
   show: false
} );

现场演示：

---

对于使用React+CKEditor 5并使用React-Strap/bootstrap模态的用户：

将模态上的自动聚焦设置为false：

<Modal autofocus={false} ...>
add the following styling:
:root { --ck-z-default: 100; --ck-z-modal: calc( var(--ck-z-default) + 999 ); }

添加以下样式：
：root{--ck-z-default:100；--ck-z-modal:calc（var（-ck-z-default）+999）；}

---

发件人：github中的codythecoder teslagovt

您好，谢谢您的帮助，但不幸的是，这没有任何区别。如果你能让它在JSFIDLE上工作，请发布一个链接。这是有效的，到目前为止我还没有看到它的任何副作用。不过，最好知道这是如何/为什么解决的。如果有任何人有任何见解，请评论或编辑答案。关于？

$（“#模态容器”）.modal（{focus:false}）

对你不起作用吗？@Reinmar不，它不起作用。下面我接受的答案是有效的。如果你有不同的想法，可以在JSFIDLE上试试。谢谢。你说得对。。。它确实有效（我们曾经测试过：|），但它停止了工作。。。我们将查看我们的指南：

<Modal autofocus={false} ...>
add the following styling:
:root { --ck-z-default: 100; --ck-z-modal: calc( var(--ck-z-default) + 999 ); }