如何在summernote div中计算图像?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在summernote div中计算图像?相关的知识,希望对你有一定的参考价值。

我有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'>中更改内容时,如何计算图像?

enter image description here

答案

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>
另一答案

我认为你的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

以上是关于如何在summernote div中计算图像?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Laravel 7 中更新图像 Summernote?

如何将通过summernote生成的大型base64图像保存在我的数据库中?

如何在 laravel 5 中插入和更新图像 Summernote

Summernote - 从服务器中删除图像

在laravel中的db中显示summernote中的图像

如何在 vueJS 中使用summernote?错误:summernote 不是函数