Question

制作了一个利用CKEditor contextmenu的插件。在引导模式中使用时，第一次右键单击会导致菜单的位置不正确。随后的尝试工作正常。

艰难调试：

CKEditor存在于一个iframe中，contextmenu存在于其首次使用时生成的单独的iframe中。新的iframe完全出现在模态之外，带有div包装器，页面上最外面的<body>标签中有一个级别。

模态中存在的正常CKEditor iframe如下所示：

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

contextmenu包装器看起来像这样：

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

contextmenu包装器获取针对<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，其中一个是动态生成的（必须使用javascript技巧超越Chrome devtools提供的功能）。

在上下文菜单源代码here中有open()方法，其开头如下：

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

我已经花了这么多时间，在开始踩过一大堆代码之前，我想知道我是否在这里走上正轨。非常感谢任何帮助。

Answer 1

Fix是一个非常简单的bootstrap css覆盖。

int     main (int argc, char **argv)
{
    SDL_Surface *screen = NULL;
    SDL_Surface *image = NULL;
    SDL_Rect pos_image;

    SDL_Init(SDL_INIT_VIDEO);
    screen = SDL_SetVideoMode(1920, 1080, 32, SDL_SWSURFACE | SDL_FULLSCREEN);
    SDL_WM_SetCaption("SDL Test", NULL);
    image = SDL_LoadBMP("pack_images_sdz/image.bmp");
    SDL_SetColorKey(image, SDL_SRCCOLORKEY, SDL_MapRGB(image->format, 0, 0, 255));
    pos_image.x = 190;
    pos_image.y = 100;
    SDL_BlitSurface(image, NULL, screen, &pos_image);
    SDL_Flip(screen);
    pause();
    SDL_Quit();
    return EXIT_SUCCESS;
}

背景滚动使上下文菜单坐标计算混乱。我怀疑默认情况下，bootstrap模式不会阻止在所有情况下以编程方式滚动背景。

Bootstrap将body.modal-open { position: fixed; }类附加到.modal-open标记上，当有一个开放模式时。

CKEditor contextmenu在模态中定位不正确

1 个答案: