summernote在img中添加类
我想在我用编辑器添加的图像中添加一个类（class =“img-responsive”）。
其实我在保存我的文本后得到了这段代码：
<img src="LINK" style="width: 628px; height: 470.7191413237925px;">
在summernote.js中我发现了这个代码：
/**
* create `<image>` from url string
*
* @param {String} sUrl
* @return {Promise} - then: $image
*/
var createImage = function (sUrl) {
return $.Deferred(function (deferred) {
$('<img>').one('load', function () {
deferred.resolve($(this));
}).one('error abort', function () {
deferred.reject($(this));
}).css({
display: 'none'
}).appendTo(document.body).attr('src', sUrl);
}).promise();
};
return {
readFileAsDataURL: readFileAsDataURL,
createImage: createImage
};
})();
我不知道如果这是正确的代码添加一个类，也不知道如何以及在哪里添加class =“img-responsive”
这可能太晚了，但只是用jQuery自己做了。
在您的模板的.js或底部：
$(document).ready(function(){
$("img").addClass("img-responsive");
});
并且它将使用您的Bootstrap img-responsive类来编辑在编辑器中添加的所有图像。
我想你想添加.addClass()到创建的图像元素：
var createImage = function (sUrl) {
return $.Deferred(function (deferred) {
$('<img>').one('load', function () {
deferred.resolve($(this));
}).one('error abort', function () {
deferred.reject($(this));
}).addClass('myClass').css({
display: 'none'
}).appendTo(document.body).attr('src', sUrl);
}).promise();
};
或者进一步在该脚本中，您将找到insertImage()函数。 或者，您可以在其中添加.addClass() ，如下所示：
this.insertImage = function ($editable, sUrl) {
async.createImage(sUrl).then(function ($image) {
recordUndo($editable);
$image.css({
display: '',
width: Math.min($editable.width(), $image.width())
}).addClass('myClass');
range.create().insertNode($image[0]);
}).fail(function () {
var callbacks = $editable.data('callbacks');
if (callbacks.onImageUploadError) {
callbacks.onImageUploadError();
}
});
};
我认为你可以通过Summernote的'onImageUpload'功能来实现。
onImageUpload : function(files) {
if (!files.length) return;
var file = files[0];
var reader = new FileReader();
reader.onloadend = function () {
var img = $("<img>").attr({src: reader.result, class: "img-responsive"}); // << Add here img attributes !
$(TariffHTMLId).summernote("insertNode", img[0]);
}
如果你可以用上传的图片替换整个内容，你可以在onImageUpload中完成
var image = $('<img>').attr({src: reader.result, class: "img-responsive"});
$(".note-editable").html(image);