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

制作了一个使用 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

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

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

什么给了？这是一项艰巨的调试工作，因为我不得不潜入 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/