Summernote在带有对话框的模态中有不可编辑的输入.InBody
问题描述:
我在jQuery UI对话框中有一个summnernote实例。 默认情况下,所有summernote的情态动词是这样的:Summernote在带有对话框的模态中有不可编辑的输入.InBody
但是当我删除<div class="modal-backdrop in"></div>
,我可以在这些模态写入所有输入:
好吧,我发现
$('someTarget').summernote({
dialogsInBody: true,
... //another options
});
:与
dialogsInBody的溶液
但是当我打开它时,summernote的模式内的所有文本输入都是不可编辑的!我可以用复选框和文件输入,即使光标变为“文本”互动,但我不能写任何东西到文本输入:
我检查,没有任何块在他们身上。而且我找不到任何额外的样式来阻止输入(例如pointer-events
)。
究竟做什么选项dialogsInBody?为什么输入不可编辑?
答
好的,我自己解决了这个问题。
有细节:
-
在summernote.js有dialogsInBody的这种使用:
var $container = options.dialogsInBody ? $(document.body) : $editor;
因此模式窗口追加自身体(代替summernote编辑器)时我们设置了
{dialogsInBody:true}
。没有其他的。 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);
};
}