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

Posted 2023-03-22

【中文标题】如何隐藏和显示 SummerNote 工具栏以响应焦点和模糊事件

【英文标题】：How to hide and show SummerNote toolbar in response to focus and blur events

【发布时间】：2021-01-26 06:24:16

【问题描述】：

如何隐藏或显示 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
        );
      
    
  );

没有结果

【问题讨论】：

我正在寻找相同类型的功能。你找到解决方案了吗？

【参考方案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

【讨论】：

我不知道如何在我的情况下使用此代码。你能解释一下吗...谢谢

@M.Colosso 我添加了进一步的解释，基本上，当您启动summernote 时，您注册到回调onBlur 函数，然后再次获取summernote 并附加到焦点事件。您可以将此代码添加到您的 $(document).ready 函数中

你不需要airMode，我发现要改变你需要的airmode确实破坏了summernote并重新构建它，所以我认为改变样式更容易。跨度>

你能把@M.Colosso标记为正确答案吗？