Summernote在使用dialogsInBody的模态中具有不可编辑的输入

Question

我在jQuery UI对话框中有一个summnernote实例。 默认情况下，所有summernote的模态都如下所示：

但是当我删除<div class="modal-backdrop in"></div>时，我可以写入这些模态中的所有输入：

好吧，我找到了一个解决方案 dialogsInBody ：

$('someTarget').summernote({
    dialogsInBody: true,
    ... //another options
});

但是当我打开它时，summernote的模态中的所有文本输入都是不可编辑的！我可以与复选框和文件输入进行交互，甚至将光标更改为＆＃34; text＆＃34;，但我不允许在文本输入中写入任何内容：

我已经检查过，它们上面没有任何阻挡。我无法找到任何阻止输入的额外样式（例如pointer-events）。

选项 dialogsInBody 的确切做法是什么？为什么输入不可编辑？

Answer 1

好的，我自己解决了这个问题。

有详细信息：

1. 在 summernote.js 中有 dialogsInBody 的这种用法：

   var $container = options.dialogsInBody ? $(document.body) : $editor;
   

   因此，当我们设置{dialogsInBody:true}时，模态窗口会将其自身附加到body（而不是summernote编辑器）。没别了。

2. Jquery UI对话框的行为阻止了所有文本输入（参见this）。因此，当在 ui-dialog 中打开 summernote 时，其所有模态都具有无法编辑的输入。

我的解决方案是从不允许的项目列表中排除summernote模式中的所有输入。它需要覆盖对话框方法 _allowInteraction ：

//fix problem that block inputs in modal dialog outside main UI Dialog

if ($.ui.dialog.prototype._allowInteraction) {
    var originalAllowInteraction = $.ui.dialog.prototype._allowInteraction;
    $.ui.dialog.prototype._allowInteraction = function(e) {
        var isInModal = $(e.target).closest('.modal-dialog').length > 0; 
        return isInModal || originalAllowInteraction(e);
    };
}