我遇到的问题似乎与此类似: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()
}
})
};
- 这不能解决问题**,如更新的fiddle所示:http://jsfiddle.net/fg3va7zq/3/
有人知道如何解决这个问题吗?关于这个问题的其他SO帖子(大部分都有好几年的历史了)并没有解决这个问题,所以我把它作为一个新问题打开了。
5条答案
按热度按时间5sxhfpxr1#
请参阅更新以了解完整详细信息
好吧,我很惊讶我找到了这个问题的解决方案,但我不知道如何或为什么这是工作,所以请不要问我,否则我将不得不寻找一个实际的答案,为什么部分.(回答'为什么?'如下)
只需从添加的函数中删除
$modalElement.focus()
,注意,您不能删除整个函数,因为如果您这样做,它将无法工作,您需要保持这种方式,只删除. focus()部分。你可以看到它在这个小提琴上的工作:http://jsfiddle.net/fg3va7zq/4/
正如我所说,我不知道它为什么工作,也不知道它是否可能会打破其他东西,但它的工作:)
它不起作用是因为当你点击模型内部时,焦点转移到了模型元素本身,所以每次点击url元素,你的焦点都从URL元素转移到了父模型元素。
实际的解决方法是关注被点击的元素,而不是关注
e.target.focus()
的模型本身,如下所示:当你设置原型的时候,你基本上覆盖了bootstrap默认的函数,bootstrap函数基本上是在点击的时候关注模型,这是你设置的第一个函数所做的。
所以当你用一个什么都不做的函数覆盖这个函数时,它什么都不做(它没有关注模型,而是关注被点击的元素)
kmpatx3s2#
对模态使用以下选项可修复此问题:
实时演示:https://codepen.io/ckeditor/pen/vzvgOe
iklwldmw3#
您是否尝试过包括popper.jscdn?
此外,某些功能需要在.js上进行初始化
下面的代码将启用文档中的所有弹出框:
示例
从弹出窗口documentation
注意:弹出窗口必须使用jQuery初始化:选择指定的元素并调用popover()方法。
ni65a41a4#
对于装有React + CKEditor 5并使用reactstrap/bootstrap模态的用户:
设置自动对焦模式为false:
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/css.html#compatibility-with-bootstrap
发件人:基特布的codythecoder-teslagovt
vfwfrxfs5#
对于bootstrap 5,使用set作为模态属性:
数据-bs-焦点=“假”