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");
})
}
}
});
我想为我从 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");
})
}
}
});