我正在使用 Summernote。使用 Jquery focusout() 作为它的 div 但它不起作用

Posted 2023-03-22

【中文标题】我正在使用 Summernote。使用 Jquery focusout() 作为它的 div 但它不起作用

【英文标题】：I am using Summernote. Using Jquery focusout() for its div but its not working

【发布时间】：2020-12-26 11:50:37

【问题描述】：

当 Summernote div 失去焦点时，我需要运行一些代码。它无法正常工作。请帮忙。

$('#summernote').on('summernote.blur', function()
    alert('Editable area loses focus');
);

【问题讨论】：

我运行了你的代码，它似乎工作，这是你想要的jsfiddle.net/w4vor9sm

【参考方案1】：

Summernote 使用它的默认类，在这种情况下，我认为这种方式也会有所帮助，

$(document).find('.summernote').on('summernote.blur', function()
    alert('Editable area loses focus');
);

$(document).ready(function() 
  var editor = $('#summernote');
  editor.summernote(
    height: ($(window).height() - 250),
    focus: false,
    toolbar: [
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['font', ['strikethrough']],
      ['fontsize', ['fontsize']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['height', ['height']],
      ['view', ['fullscreen', 'codeview']],
    ],
    oninit: function() 
      // Add "open" - "save" buttons
      var noteBtn = '<button id="makeSnote" type="button" class="btn btn-default btn-sm btn-small" title="Identify a music note" data-event="something" tabindex="-1"><i class="fa fa-music"></i></button>';
      var fileGroup = '<div class="note-file btn-group">' + noteBtn + '</div>';
      $(fileGroup).appendTo($('.note-toolbar'));
      // Button tooltips
      $('#makeSnote').tooltip(
        container: 'body',
        placement: 'bottom'
      );
      // Button events
      $('#makeSnote').click(function(event) 
        var highlight = window.getSelection(),
          spn = document.createElement('span'),
          range = highlight.getRangeAt(0)

        spn.innerhtml = highlight;
        spn.className = 'snote';
        spn.style.color = 'blue';

        range.deleteContents();
        range.insertNode(spn);
      );
    ,

  );


  $(document).find('.summernote').on('summernote.blur', function() 
    alert('Editable area loses focus');
  );
  
  
);

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>







<div style="width: 100%; height: 95px;text-align: center;padding-top: 10px;">
  Outer Area
</div>

<textarea class='summernote' id='summernote' rows='10'></textarea>

【讨论】：

$(document).find('.summernote') 应该不需要，因为它不是在 DOM 之后创建的，您的代码与我给出的示例有何不同？