Summernote如何在图片中添加类？

Question

我希望能在使用编辑器添加的图片中加入一个类(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"

- Loko

---

有什么进展吗？我在考虑通过 jQuery 在图片实际显示时（而不是在编辑器中）添加 img-responsive 类。 - Derek Greer

Answer 1

也许有些晚了，但我自己用jQuery完成了这个任务。

在你的.js文件或模板底部：

$(document).ready(function(){
    $("img").addClass("img-responsive");
});

它将使用Bootstrap的img-responsive类来处理编辑器中添加的所有图像。

- kennha

Answer 2

我认为你想给创建的图像元素添加 .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();
        }
    });
};

- TheCarver

Answer 3

我认为你可以通过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);

- Muhammed Shihabudeen Labba A