如何隐藏和显示SummerNote工具栏以响应焦点和模糊事件

Question

如何隐藏或显示SummerNote工具栏以响应聚焦或模糊事件？我有一些表单有3个或更多的文本区域，我希望只在重点区域看到工具栏。我在Django表单上使用Bootstrap和SummerNote。

我尝试过：

// Select all textarea tags in the form
var elements = $( "textarea" );
// Loop through all textarea elements
for (var i = elements.length - 1; i >= 0; i--) {
var element = elements[i];
$( '#' + element.id ).summernote({
airMode: false,   // <-- False: Show toolbar; True: Hide toolbar
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'subscript', 'superscript', 'clear']],
['color', ['color']],
['para', ['ol', 'ul', 'paragraph']],
['table', ['table']],
['insert', ['hr']],
['view', ['fullscreen']]
], 
callbacks: {
onFocus: function() {
$( '#' + this.id ).summernote({
airMode: false
});
},
onBlur: function() {
$( '#' + this.id ).summernote({
airMode: true
});
}
}
});
}

无结果

Answer 1

如果你只需要隐藏工具栏，你可以更改样式并添加一个显示：none到工具栏div，当聚焦时你删除样式，当模糊时你将其添加回来。

我所做的基本上是获取回调事件onBlur(当你在summernote组件外部单击时会调用它。我获取ParentNode并比较用户是否在工具栏上单击，如果没有，我会找到带有class.note工具栏的子项，然后我改为显示：none，这将只隐藏工具栏。

在onFocus上，即使我做了相反的事情，我也会得到注释编辑器，并将显示更改为阻止

$('.summernote').summernote({
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'subscript', 'superscript', 'clear']],
['color', ['color']],
['para', ['ol', 'ul', 'paragraph']],
['table', ['table']],
['insert', ['hr']],
['view', ['fullscreen']]
],
callbacks: {
onBlur: function (e) {
var p = e.target.parentNode.parentNode
if (!(e.relatedTarget && $.contains(p, e.relatedTarget))) {
$(this).parent().children('.note-editor').children('.note-toolbar').css("display", "none");
}
},
onFocus: function (e) {
$(this).parent().children('.note-editor').children('.note-toolbar').css("display", "block");
}
}
});

如果你需要一个平稳的过渡，你可以四处玩耍，改变高度，而不是它显示的方式

CodePen：https://codepen.io/guilherme-flores/pen/dyvQrKW