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"

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.

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