ckeditor + smartgwt modal window + dialog 下拉菜单获得焦点但不显示选项

Question

我将 ckEditor 与 GWT 和 SmartGWT 一起使用。我有一个问题，每当 ckEditor 显示一个对话框（例如 link 按钮，table 按钮）时，尽管对话框中的项目获得焦点（输入文本工作正常，我可以在其中写入），下拉列表（select 元素）在单击它们时，不会展开以显示其选项（只有当它们具有焦点且用户点击 "spacebar" 时它们才会展开）。这仅在 firefox 和 chrome（最新版本）中发生，而在 IE11 上它按预期工作。

请注意，如果 GWT/jquery 模态中存在 ckEditor 实例，我已经知道存在 "focus" 问题，并且我已经包含了一个修复程序：

$wnd.CKEDITOR.on('dialogDefinition', function (evt) {
        var dialog = evt.data.definition.dialog;
        dialog.on('show', function () {
              var element = this.getElement();
              var labelledby = element.getAttribute('aria-labelledby');
              var nativeElement = $wnd.document.querySelector("[aria-labelledby='" + labelledby + "']");
              nativeElement.onclick = function (evt) {
                 if ((evt.target.tagName == "INPUT" || evt.target.tagName == "SELECT" || evt.target.tagName == "TEXTAREA") &&
                      -1 != evt.target.className.indexOf("cke_dialog_ui_input")) {
                      evt.target.focus();
                 };
              }
        });
    });

有什么提示可以让下拉菜单正确运行吗？在我看来，下拉元素似乎没有收到点击事件（尽管点击它会获得焦点）或事件的传播以某种方式意外停止。

编辑忘记提及如果 ckEditor 实例位于模态 SmartGWT window 内，就会出现问题。更具体地说，如果我设置

Window win = new Window(); //com.smartgwt.client.widgets.Window
win.setIsModal(false);

然后添加 DynamicForm 表单，其中包含 window 上的 ckEditor 项目，然后对话框下拉列表工作正常，但是如果我设置

win.setIsModal(true);

我遇到了上述错误行为

Answer 1

如果其他人遇到与我相同的问题，解决方案是在对话的 show 事件发生时调用 win.hideClickMask()。这可以通过多种方式实现，具体取决于 ckEditor 与 SmartGWT 的集成方式。在我的 implementation 中，这是通过重写 onDialogShow() 实现的，如下所示：

final CKEditor ckEditor = new CKEditor(conf) {
                @Override
                public void onDialogShow() {
                    // to overcome the problem that smartgwt modality obstruct the dropdowns of a ckeditor dialog to be pressed
                    final NodeList<Element> allWindowsWithModalMask = findAllWindowsWithModalMask();
                    if(allWindowsWithModalMask != null ) {
                        for(int i =0; i<allWindowsWithModalMask.getLength(); i++) {
                            Element el = allWindowsWithModalMask.getItem(i);
                            String id = el.getAttribute("eventproxy");
                            if(Canvas.getById(id) != null) {
                                hideClickMask(Canvas.getById(id).getOrCreateJsObj());
                            }
                        }
                    }
                }
            };

和

protected native NodeList<Element> findAllWindowsWithModalMask() /*-{
    return $wnd.document.querySelectorAll("[class='windowBackground']");
}-*/;

protected native void hideClickMask(JavaScriptObject windowCanvas) /*-{
    windowCanvas.hideClickMask();
}-*/;

ckeditor + smartgwt modal window + dialog 下拉菜单获得焦点但不显示选项

ckeditor + smartgwt modal window + dialog dropdown gains focus but does not show options

gwt

smartgwt

ckeditor

ckeditor4.x