jquery-ui 对话框中的 ckeditor - Internet Explorer 11

Question

我正在尝试在 jquery-ui 对话框中显示 ckeditor，乍一看它工作正常。

但在 IE11 中，当我单击任何打开下拉菜单/选择（例如颜色选择）的工具按钮时，鼠标松开时所需的覆盖会短暂闪烁，但下一刻它就消失了。

它适用于 Chrome 和 Edge，但目前 IE11 是最重要的目标浏览器。

jQuery 是 1.11，jQuery-UI 是 1.11.4，ckEditor 是 4.15.1。

我发现，只有当对话框处于模式状态时才会出现问题。这是一个示例：

function openDialogEditor() {

    var somedialog = document.createElement("div");

    somedialog.id = "somedialog";

    somedialog.innerHTML = '<div id="somediv"><textarea id="someid" name="somename" class="ckeditor" style="height:350px;">Stackoverflow is great!</textarea></div>';

    document.body.appendChild(somedialog);

    

    jQuery(somedialog).dialog({width: '800px', modal: true}).parent().promise().done(function(dlg) {

        CKEDITOR.replace("someid");

    });

}

如果更改modal: true为modal: false，问题就得到解决 - 但对话框应该是模态的。

我的解决方法：请参阅下面的答案。

Answer 1

可能的解决方案，在 IE11 中工作：将对话框设置为modal: false。使用 jquery 的 css 类添加自定义叠加层。删除对话框关闭时的自定义覆盖。（我的代码示例还需要删除编辑器以重用该openDialogEditor()函数 - 当然这也可以以不同的方式处理。）1 + 2)function openDialogEditor() {&nbsp; &nbsp; var somedialog = document.createElement("div");&nbsp; &nbsp; somedialog.id = "somedialog";&nbsp; &nbsp; somedialog.innerHTML = '<div id="somediv"><textarea id="someid" name="somename" class="ckeditor" style="height:350px;">Stackoverflow is great!</textarea></div>';&nbsp; &nbsp; document.body.appendChild(somedialog);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; jQuery(somedialog).dialog({width: '800px', modal: false}).parent().promise().done(function(dlg) {&nbsp; &nbsp; &nbsp; &nbsp; CKEDITOR.replace("someid");&nbsp; &nbsp; &nbsp; &nbsp; dlg.css('z-index', '101').parent().append('<div id="ownOverlay" class="ui-widget-overlay ui-front" style="z-index:100"></div>');&nbsp; &nbsp; });}扩展对话框关闭功能：jQuery.widget("ui.dialog", jQuery.ui.dialog, {&nbsp; &nbsp; close: function(ev) {&nbsp; &nbsp; &nbsp; &nbsp; // remove custom overlay:&nbsp; &nbsp; &nbsp; &nbsp; jQuery("#ownOverlay").remove();&nbsp; &nbsp; &nbsp; &nbsp; // remove dialog and editor:&nbsp; &nbsp; &nbsp; &nbsp; var dlgDiv = jQuery(ev.target).closest('div[role="dialog"]')[0];&nbsp; &nbsp; &nbsp; &nbsp; dlgDiv.parentNode.removeChild(dlgDiv);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; return this._super(ev);&nbsp; &nbsp; }});如果您有更好的解决方案、建议、改进：请评论。:)