如何计算summernote div中的图像？答案

【问题标题】：How to count images in summernote div?如何计算summernote div中的图像？
【发布时间】：2018-06-06 21:25:23
【问题描述】：

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

这是我的脚本。

HTML

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

$('#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'> 中的内容时，我如何计算图像？

【问题讨论】：

标签： javascript jquery callback summernote

【解决方案1】：

summernote.change 事件有一个参数：contents。此参数包含您的 Summernote 中的 html 源代码。你可能会得到与get--set-code相同的html：

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

因此，你需要从：

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

到：

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

sn-p：

$('#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>

【讨论】：

【解决方案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

【讨论】：