jQuery 将Class添加到summernote数据中的所有img

jQuery addClass to all img in summernote data

我想为我从 summernote 文本中获得的一些 HTML 中的所有 img 添加 img-responsive。我认为这会奏效,但事实并非如此。也许是因为 img 标签没有 class 属性?

html

的例子
<p><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABI...."></p>

这是我的代码:

var rawHtml = $("#summernote").summernote('code');
$(rawHtml).find('img').each(function () {
  $('img').addClass('img-responsive');
});

更新:错误已修复。现在应该可以使用了

你需要让 code 回到 #summernote。 试试这个:

 var rawHtml = $($('#summernote').summernote('code'));
 rawHtml.find('img').each(function () {
        $('img').addClass('img-responsive');
    });
 $('#summernote').summernote('code', 
    rawHtml.html();
 );

应该是:

var rawHtml = $('#summernote').summernote('code');
$('#summernote').find('img').each(function () {
    $(this).addClass('img-responsive');
});

或者更简单:

var rawHtml = $('#summernote').summernote('code');
$('#summernote img').addClass('img-responsive');

我都试过了,但都不适合我。由于某种原因,图像已损坏。显示内容时得到 [object][object] 或什么都没有。

我尝试了一个简单的字符串替换并且成功了。之后可能还会编辑数据。

这有效。

    var rawHtml = $("#summernote").summernote('code');
    var imgResp = rawHtml.replace('<img src=', '<img class="img-responsive" src=');
    var description = encodeURIComponent(imgResp);

    var record = {
        EventId: $('#EventId').val(),
        Title: $('#EventTitle').val(),
        Start: $('#Start').val(),
        End: $('#End').val(),
        IsActive: $('#IsActive').prop('checked'),
        IsFullDay: $('#IsFullDay').prop('checked'),
        Description: description
    };

// v 0.8.9
$('#summernote').summernote({
  callbacks: {
      onChange: function(contents, $editable) {
      //find images on note-editable class, 
      var imgs = $('.note-editable').find("img");
        $.each(imgs, function(index, img){
           //bootstrap 3
           $(img).addClass("img-responsive");
           
           //bootstrap 4
           //$(img).addClass("img-fluid");
        })
      }
  }
});