解决方案更新

Question

解决方案更新

经过一段时间的搜索后，我想我可以解决这个问题。对我来说，使用模态对话框的唯一功能是它阻止从它后面的元素进行访问。我发现它与使用背后叠加的非模态对话框一样。叠加只是做了一个模态对话的技巧（尽管它没有完全特色的模态）。

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

以下是jsfiddle中的完整代码。希望这会有所帮助。

我正在使用jQuery来显示对话框。 我将此对话框设置为模态模式。在该对话框中，我包含一个textarea，然后将与CKEditor一起使用。当我显示对话框时，CKEditor很好地转换了textarea。但是当尝试包含图像时（ 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输入对话框。有没有人可以帮助我？

Answer 1

最近，（仅此一周），我遇到了类似的问题。我打算完全按照你提供的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已经有代码来处理它。

通过执行 $。小部件（'ui.dialog'，$ .ui.dialog，function（）{}）; 它应用于所有ui对话框对于我们的网站。

Working jsFiddle Demo

参考点：

jQuery Dialog UI _allowInteraction

jQuery UI Widget Factory

Answer 2

是的，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

Answer 3

一个对我有用的简单解决方案来自另一个没有提及CKE的SO问题，但是关于制作模态非模态：https://stackoverflow.com/a/28101676/4050940

在模态打开后运行：

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

ckeditor对话框可以正常工作

Answer 4

这个替代方案对我有用：

//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

Answer 5

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

我尝试了几种在Internet上找到的解决方案，但是只有this one为我解决了问题

$.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

jQuery模式对话框和CKEditor输入对话框

解决方案更新

5 个答案: