summernote add class in img

Question

I want to add a class (class="img-responsive") in the images which i add with the editor.

actually i get this code after i saved my text:

<img src="LINK" style="width: 628px; height: 470.7191413237925px;">

in the summernote.js i found this code:

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

i dont know if that is the right code to add a class, and also i dont know how and where to add class="img-responsive"

Varmint

Any luck? I was thinking about adding the img-responsive class via jquery on when the image is actually displayed (not in the editor). – Parasynapsis

Answer 1

This is probably way too late, but just did it with jQuery myself.

In your .js or bottom of your template:

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

and it will use your Bootstrap img-responsive class for all images that were added in the editor.

Chymotrypsin

Answer 2

I think you want to add .addClass() to the created image element:

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

Or further up in that script you will find the insertImage() function. Alternatively, you could add .addClass() there, like so:

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

Battled

Answer 3

I think you can achieve this through 'onImageUpload' function of Summernote.

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

If you are ok to replace the whole content with the uploaded image, you can just do this in onImageUpload

var image = $('<img>').attr({src: reader.result, class: "img-responsive"});
$(".note-editable").html(image);

Carbamate