gpt4 book ai didi

javascript - CKEditor 上下文菜单在模态中的位置不正确

转载 作者:行者123 更新时间:2023-11-28 03:43:57 26 4
gpt4 key购买 nike

制作了一个使用 CKEditor 上下文菜单的插件。在 Bootstrap 模式中使用时,第一次右键单击会导致菜单定位不正确。随后的尝试工作正常。

难以调试:

CKEditor 存在于一个 iframe 中,contextmenu 存在于它自己单独的 iframe 中,该 iframe 在第一次使用时生成。新的 iframe 完全出现在模态之外,带有 div 包装器,从最外层进入一层 <body>页面上的标记。

存在于模式内部的普通 CKEditor iframe 如下所示:

<iframe src="" frameborder="0" 
class="cke_wysiwyg_frame cke_reset"
title="Rich Text Editor, ControlLabel" tabindex="0" ...

上下文菜单包装看起来像这样:

<div lang="en" id="cke_28" dir="ltr" class="cke cke_reset_all ...
<iframe id="cke_28_frame" class="cke_panel_frame" ...

上下文菜单包装器正在获取根据 <body> 计算的内联位置样式标签。第一次右键单击调出上下文菜单时出错。

z-index: 10001;
position: absolute;
top: 177px; // wrong. too small.
left: 932.5px;
opacity: 1;
width: 130px;
height: 203px

Contextmenu position problem

第二次是正确的。单击离开,然后右键单击以恢复上下文菜单,您将获得正确的呈现:

z-index: 10001;
position: absolute;
top: 487px; // correct. proper distance
left: 719.5px;
opacity: 1;
height: 203px;
width: 130px;

enter image description here

什么给了?这是一项艰巨的调试工作,因为我不得不潜入 iframe,其中一个是动态生成的(必须使用 Chrome devtools 提供的之外的 javascript 技巧)。

有一个 open()上下文菜单源代码中的方法 here ,它是这样开始的:

open: function( offsetParent, corner, offsetX, offsetY ) {
this.editor.focus();
// ...

已经花了很多时间,在我开始逐步执​​行堆积如山的代码之前,我想知道我是否在正确的轨道上。非常感谢任何帮助。

最佳答案

修复是一个非常简单的 Bootstrap css 覆盖。

body.modal-open {
position: fixed;
}

背景滚动混淆了上下文菜单坐标计算。我怀疑默认情况下,引导模式不会阻止背景在所有情况下都以编程方式滚动。

Bootstrap 附加了 .modal-open上课到 <body>当有一个打开的模态时标记。

关于javascript - CKEditor 上下文菜单在模态中的位置不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44078938/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com