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); 
    }; 
}