Question

私はsummernote divを持っており、その編集可能なsummernote divに挿入された画像を数えたいと思います。私はonChangeコールバックとJQueryのfind()メソッドを使用しています。しかし、console.logは、0以上の画像がある場合、を返します。

ここに私のスクリプトです。

HTML

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

<div id='summernote'>におけるユーザーの変更が何か私は画像をカウントすることができますどのように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); 
       } 
      } 
}); 

？ 内容：

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); 
}); 

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