Question

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

html的例子

TEXT_SHOW_BACKTRACE environmental variable.
TEXT_SHOW_BACKTRACE environmental variable.

这是我的代码：

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

Answer 1

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

Answer 2

更新：错误已修复。它现在应该工作

您需要code返回#summernote。试试这个：

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

Answer 3

应该是：

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

甚至更简单：

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

Answer 4

我试过了两个，但都没有为我工作。由于某种原因，图像已损坏。在显示内容时，我得到[对象] [对象]或没有。

我尝试了一个简单的字符串替换，但它有效。也可能会在之后编辑数据。

这很有用。

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

jQuery addClass到summernote数据中的所有img

4 个答案: