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"

7
javascript summernote twitter-bootstrap

3 ответов

Это, вероятно, слишком поздно, но просто сделал это с jQuery сам.

в свой .js или нижняя часть вашего шаблона:

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

и он будет использовать ваш Bootstrap в img-отзывчивый класс для всех изображений, добавленных в Редакторе.

4

Я думаю, вы хотите добавить .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();
};

или дальше в этом скрипте вы найдете . Кроме того, вы можете добавить .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();
        }
    });
};
1

Я думаю,вы можете достичь этого через функцию "onImageUpload" 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]);
  }

Если вы в порядке, чтобы заменить весь контент загруженным изображением, вы можете просто сделать это в onImageUpload

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