如何隐藏和显示 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

如果您只需要隐藏工具栏，您可以更改样式并添加 display: none 到工具栏 div，焦点时移除样式，模糊时将其添加回来。

我所做的基本上是获取回调事件 onBlur （当您在summernote组件外部单击时调用它。我正在获取ParentNode并比较用户是否单击工具栏，如果不是我发现的任何一个.note-toolbar 类的孩子和我更改为显示：无，这将只隐藏工具栏。

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

如果您需要平滑过渡，您可以随意调整高度而不是显示方式

代码笔： https://codepen.io/guilherme-flores/pen/dyvQrKW