jquery-ui 对话框中的 ckeditor - Internet Explorer 11 工具下拉菜单问题
ckeditor within jquery-ui dialog - internet explorer 11 problem with tool dropdowns
我正在尝试在 jquery-ui 对话框中显示一个 ckeditor,
它工作正常 - 乍一看。
但在 IE11 中,当我单击任何打开下拉菜单/选择(例如颜色选择)的工具按钮时,鼠标松开时 requi 红色覆盖层会短暂闪烁,但下一个瞬间消失了。
它适用于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;">Whosebug 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
,问题已解决 - 但对话框 应该 是模态的。
我的解决方法:请参阅下面的答案。
可能的解决方案,适用于 IE11:
- 将对话框设置为
modal: false
。
- 使用 jquery 的 css 添加自定义叠加层 类。
- 删除对话框关闭时的自定义覆盖。
(我的代码示例还需要删除编辑器以重用 openDialogEditor()
函数 - 这当然也可以以不同的方式处理。)
1 + 2)
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;">Whosebug is great!</textarea></div>';
document.body.appendChild(somedialog);
jQuery(somedialog).dialog({width: '800px', modal: false}).parent().promise().done(function(dlg) {
CKEDITOR.replace("someid");
dlg.css('z-index', '101').parent().append('<div id="ownOverlay" class="ui-widget-overlay ui-front" style="z-index:100"></div>');
});
}
- 扩展对话框关闭功能:
jQuery.widget("ui.dialog", jQuery.ui.dialog, {
close: function(ev) {
// remove custom overlay:
jQuery("#ownOverlay").remove();
// remove dialog and editor:
var dlgDiv = jQuery(ev.target).closest('div[role="dialog"]')[0];
dlgDiv.parentNode.removeChild(dlgDiv);
return this._super(ev);
}
});
如果您有更好的解决方案、建议、改进:欢迎评论。 :)
我正在尝试在 jquery-ui 对话框中显示一个 ckeditor, 它工作正常 - 乍一看。
但在 IE11 中,当我单击任何打开下拉菜单/选择(例如颜色选择)的工具按钮时,鼠标松开时 requi 红色覆盖层会短暂闪烁,但下一个瞬间消失了。
它适用于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;">Whosebug 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
,问题已解决 - 但对话框 应该 是模态的。
我的解决方法:请参阅下面的答案。
可能的解决方案,适用于 IE11:
- 将对话框设置为
modal: false
。 - 使用 jquery 的 css 添加自定义叠加层 类。
- 删除对话框关闭时的自定义覆盖。
(我的代码示例还需要删除编辑器以重用 openDialogEditor()
函数 - 这当然也可以以不同的方式处理。)
1 + 2)
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;">Whosebug is great!</textarea></div>';
document.body.appendChild(somedialog);
jQuery(somedialog).dialog({width: '800px', modal: false}).parent().promise().done(function(dlg) {
CKEDITOR.replace("someid");
dlg.css('z-index', '101').parent().append('<div id="ownOverlay" class="ui-widget-overlay ui-front" style="z-index:100"></div>');
});
}
- 扩展对话框关闭功能:
jQuery.widget("ui.dialog", jQuery.ui.dialog, {
close: function(ev) {
// remove custom overlay:
jQuery("#ownOverlay").remove();
// remove dialog and editor:
var dlgDiv = jQuery(ev.target).closest('div[role="dialog"]')[0];
dlgDiv.parentNode.removeChild(dlgDiv);
return this._super(ev);
}
});
如果您有更好的解决方案、建议、改进:欢迎评论。 :)