Question

我想在编辑器中添加一个类（class =“img-responsive”）。

实际上我在保存文本后得到了这段代码：

&lt;img src=&quot;LINK&quot; style=&quot;width: 628px; height: 470.7191413237925px;&quot;&gt;

在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”

Answer 1

这可能为时已晚，但我自己就是用jQuery做的。

在您的.js或模板底部：

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

它会对编辑器中添加的所有图像使用Bootstrap img-responsive 类。

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

Answer 3

我认为你可以通过onImageUpload＆＃39;来实现这一目标。 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);

summernote在img中添加类

3 个答案: