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

Question

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

CKEditor 5，v1.11.1
jquery 3.2.1
Bootstrap 3.3.7

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

如果您单击“启动模态”，它将打开模态。当试图插入一个 link 我得到这个：

我无法在输入中单击以插入 link。

以下 CSS 用于确保 link 输入的 z-index 高于模态：

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

这有效，没有它 link 框甚至不可见。

linked 回答中提供了以下 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()
        }
    })
};

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

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

Answer 1

您是否尝试过包含 popper.js 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>

来自弹出框 documentation

Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.

Answer 2

查看更新了解完整详情

好吧，我很惊讶我找到了这个问题的解决方案，但我不知道这是如何工作的或为什么会这样，所以请不要问我，否则我将不得不寻找真正的答案来解决这个问题部分。（'Why?' 的答案如下）

只需从添加的函数中删除 $modalElement.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')) {
            
        }
    })
};

您可以在 fiddle 中看到它的工作原理：http://jsfiddle.net/fg3va7zq/4/

正如我所说，我不知道它为什么有效，也不知道它是否会破坏其他东西，但它确实有效:)

更新

Why it works?

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

Why it doesn't work when the whole function removed?

当你设置原型时，你基本上覆盖了函数 bootstrap 默认情况下，bootstrap 函数基本上是在点击某些东西时关注模型，这就是你设置的第一个函数正在做。

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

Answer 3

将这些选项用于模态修复了问题：

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

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

现场演示： https://codepen.io/ckeditor/pen/vzvgOe

Answer 4

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

将模态框的自动对焦设置为 false：

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

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/css.html#compatibility-with-bootstrap

发件人：codythecoder-teslagovt github

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

CKEditor 5 popup controls not working in Bootstrap 3 - 2018

html

javascript

css

jquery

ckeditor