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

ltskdhd1  于 2023-01-06  发布在  Bootstrap
关注(0)|答案(5)|浏览(275)

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

  • CKEditor 5,版本1.11.1
  • jquery 3.2.1语言
  • Bootstrap 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()
        }
    })
};

有人知道如何解决这个问题吗?关于这个问题的其他SO帖子(大部分都有好几年的历史了)并没有解决这个问题,所以我把它作为一个新问题打开了。

5sxhfpxr

5sxhfpxr1#

请参阅更新以了解完整详细信息

好吧,我很惊讶我找到了这个问题的解决方案,但我不知道如何或为什么这是工作,所以请不要问我,否则我将不得不寻找一个实际的答案,为什么部分.(回答'为什么?'如下)
只需从添加的函数中删除$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**
  • 为什么它不工作时,整个功能删除?*

当你设置原型的时候,你基本上覆盖了bootstrap默认的函数,bootstrap函数基本上是在点击的时候关注模型,这是你设置的第一个函数所做的。
所以当你用一个什么都不做的函数覆盖这个函数时,它什么都不做(它没有关注模型,而是关注被点击的元素)

kmpatx3s

kmpatx3s2#

对模态使用以下选项可修复此问题:

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

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

实时演示:https://codepen.io/ckeditor/pen/vzvgOe

iklwldmw

iklwldmw3#

您是否尝试过包括popper.jscdn

<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
注意:弹出窗口必须使用jQuery初始化:选择指定的元素并调用popover()方法。

ni65a41a

ni65a41a4#

对于装有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

vfwfrxfs

vfwfrxfs5#

对于bootstrap 5,使用set作为模态属性:
数据-bs-焦点=“假”

相关问题