Summernote在带有对话框的模态中有不可编辑的输入.InBody

Question

我在jQuery UI对话框中有一个summnernote实例。 默认情况下，所有summernote的情态动词是这样的：

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

好吧，我发现

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

：与 dialogsInBody的溶液

但是当我打开它时，summernote的模式内的所有文本输入都是不可编辑的！我可以用复选框和文件输入，即使光标变为“文本”互动，但我不能写任何东西到文本输入：

我检查，没有任何块在他们身上。而且我找不到任何额外的样式来阻止输入（例如pointer-events）。

究竟做什么选项dialogsInBody？为什么输入不可编辑？

Answer 1

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

有细节：

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

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

   因此模式窗口追加自身体（代替summernote编辑器）时我们设置了{dialogsInBody:true}。没有其他的。

2. Jquery UI对话框有阻止所有文本输入的行为（请参阅this）。所以当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); 
    }; 
}