14

解决方案更新

在花了一些时间搜索之后，我想我可以解决这个问题。对我来说，使用模态对话框的唯一特点是它可以防止从它后面的元素访问。我发现它与使用带有覆盖层的非模态对话框一样。叠加层只是起到了作为模态对话框的作用（尽管它不是全功能的模态）。

所以这是我的解决方案，在初始化对话框之前，我在它之前插入一个 div 元素并将ui-widget-overlay类赋予 div。它使用.insertBefore()方法完成。然后，在对话框“关闭”事件中，我删除了该覆盖 div。对话框 ' modal ' 选项设置为false。通过使用此解决方案，CKEditor 弹出窗口工作正常，因为只有一个模式对话框（CKEditor 弹出窗口）。

这是jsfiddle中的全部代码。希望这可以帮助。

我正在使用 jQuery 来显示一个对话框。我将此对话框设置为模态模式。在该对话框中，我包含一个文本区域，然后将与 CKEditor 一起使用。当我显示对话框时，CKEditor 很好地转换了文本区域。但是当尝试包含图像时（CKEditor 为输入显示 ITS OWN DIALOG），我无法使用 URL 输入。

这是我初始化对话框的代码：

var $dialogJurnal = $("#dialog").dialog({
    autoOpen: false,
    height: 630,
    width: 'auto',
    maxHeight: 630,
    resize: 'auto',
    modal: true
});

使用该配置，我无法单击文本框并输入。

然后我发现，如果我将模式设置为 false，那么它应该可以工作。

这是代码：

var $dialogJurnal = $("#dialog").dialog({
    autoOpen: false,
    height: 630,
    width: 'auto',
    maxHeight: 630,
    resize: 'auto',
    modal: false
});

使用该代码，一切正常，我可以单击文本框并输入。

因为我需要启用模态模式，所以这成为我的问题。我认为这是因为 jQuery 对话框（或类似）中的 z-index 阻止了 CKEditor 输入对话框。有没有人可以帮助我？

4

5 回答 5

4

最近，（就在这周），我遇到了类似的问题。我将完全按照您在提供的 jsfiddle 中所做的操作。然而，经过一些研究并尝试了对话 UI 代码中发生的事情以及页面中的标记发生了什么，我终于明白了我需要做什么。

这都是关于小部件工厂和_allowInteraction函数的。

对我来说，我在 jQuery 对话框中使用带有过滤器的 Sencha ExtJs 网格。网格工作正常，但过滤器（文本框过滤器）不起作用。这是因为当显示过滤器时，它们位于对话框 div 或 .ui-dialog 标记之外。

如果您深入了解_allowInteraction函数中的对话框 UI 代码，它会执行以下操作。

//From the jQuery dialog UI
_allowInteraction: function(event) {
    if($(event.target).closest('.ui-dialog').length) {
        return true;
    }

    // TODO: Remove hack when datepicker implements
    // the .ui-front logic (#8989)
    return !!$( event.target ).closest(".ui-datepicker").length;
}

我需要做的就是在我的 jQuery UI 文件之后添加一个 javascript 文件，代码如下：

$.widget('ui.dialog', $.ui.dialog, {
    _allowInteraction: function( event ) {
        //This overrides the jQuery Dialog UI _allowInteraction to handle the sencha
        //extjs filter's not working.
        //this._super(event) passes onto the base jQuery UI
        return !!$( event.target ).closest( ".x-panel :input" ).length || this._super( event );
    }
}

由于_allowInteraction会在对话框失去焦点时触发，因此我只需要查找 .x-panel :input，因为这是触发事件的原因。

在您的情况下，您只需要查看 CKEditor 最接近的元素是什么。这样您就不需要做任何类型的解决方法，您只需将对话框的模式选项设置为 true。您不想这样做的原因是如果您要在该对话框之上显示另一个对话框。您的叠加层可能订购错误或附加到错误的元素。对话框 UI 已经有代码来处理它。

通过执行$.widget( 'ui.dialog' , $.ui.dialog, function(){}); 它适用于我们网站的所有 ui 对话框。

工作 jsFiddle 演示

参考点：

jQuery 对话框 UI _allowInteraction

jQuery UI 小部件工厂

于 2014-04-26T13:42:03.280 回答
0

是的，jQueryUI 的模式阻止了与 jQuery 对话框之外的任何东西进行交互。在创建 jQuery UI 对话框之前注册它：

// Prevent jQuery UI modal from disabling ckeditor dialog inputs
// @see http://api.jqueryui.com/dialog/#method-_allowInteraction
$.widget("ui.dialog", $.ui.dialog, {
    _allowInteraction: function(event) {
        return !!$(event.target).closest(".cke_dialog").length || this._super(event);
    }
});

来源：http ://bugs.jqueryui.com/ticket/9087#comment:14

于 2015-01-07T12:39:59.300 回答
0

我在模态中使用 CKEditor 时遇到了同样的问题，尽管我没有使用 jQuery 创建模态。

我尝试了在互联网上找到的几种解决方案，但只有这个解决了我的问题

$.fn.modal.Constructor.prototype._enforceFocus = function() {
            var $modalElement = this.$element;
            $(document).on('focusin.modal',function(e) {
                if ($modalElement[0] !== e.target
                    && !$modalElement.has(e.target).length
                    && $(e.target).parentsUntil('*[role="dialog"]').length === 0) {
                    $modalElement.focus();
                }
            });
        };

来自https://stackoverflow.com/a/43104663/10236810

于 2018-12-05T12:30:39.787 回答
0

一个对我有用的更简单的解决方案取自另一个没有提到 CKE 的 SO 问题，而是关于使模态非模态： https ://stackoverflow.com/a/28101676/4050940

在打开模式后运行它：

$(document).off('focusin.bs.modal');

ckeditor 对话框可以正常工作

于 2017-11-18T10:52:37.317 回答
0

这种替代方法对我有用：

//Create the dialog
$("#myDialog").dialog({
 modal: true
});

//Fix problem with ckeditor dialogs
 $.ui.dialog.prototype._allowInteraction = function(event) {
  return true;
 };

几乎在最后的来源：https ://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog

于 2018-05-02T09:21:55.540 回答