如何在summernote div中计算图像？

Question

我有summernote div，我想在可编辑的summernote div上计算插入的图像。我正在使用onChange回调和JQuery的find()方法。但是当我的图片数量超过0时，console.log会返回 0 。

这是我的剧本。

HTML

<div id="summernote"></div>

JS

$('#summernote').summernote({
            placeholder: 'Hello bootstrap 4',
            tabsize: 2,
            height: 400,
            callbacks: {
                onChange: function(e) {
                    var imageCount = $("#summernote").find('img').length;
                    console.log("img count:" + imageCount);
                }
            }
});

当用户更改<div id='summernote'>中的某些内容时，如何计算图像？

Answer 1

summernote.change事件有一个参数：内容。此参数包含summernote中的html源代码。您可以使用get--set-code获得相同的HTML：

var markupStr = $('#summernote').summernote('code');

因此，您需要更改：

var imageCount = $("#summernote").find('img').length;

为：

var imageCount = $(contents).find('img').length;

摘录：

$('#summernote').summernote({
  placeholder: 'Hello bootstrap 4',
  tabsize: 2,
  height: 400,
  callbacks: {
      onChange: function(contents) {
          var imageCount = $(contents).find('img').length;
          console.log("img count:" + imageCount);
      }
  }
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

<!-- include summernote css/js-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.min.js"></script>


<div id="summernote"></div>

Answer 2

我认为你的summernote版本不支持jquery自定义事件样式。所以你可以试试这个：

$('#summernote').on('summernote.change', function(we, contents, $editable) {
    var count = $(contents).find('img').length;  
    console.log('images number : ' + count);
});

参考：https://summernote.org/deep-dive/#oninit