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

问题描述

如何隐藏或显示SummerNote工具栏以响应焦点或模糊事件？我有一些具有3个或更多textareas的表格，我只想在重点区域中看到工具栏。我在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
        });
      }
    }
  });
}

没有结果

解决方法

如果您只需要隐藏工具栏，您可以更改样式并添加 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

django django wysiwyg