7

我想在我用编辑器添加的图像中添加一个类（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"

4

3 回答 3

4

这可能为时已晚，但我自己只是用 jQuery 完成的。

在您的 .js 或模板底部：

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

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

于 2014-10-30T22:49:36.697 回答
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();
        }
    });
};
于 2015-02-22T05:23:13.520 回答
0

我认为您可以通过 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);
于 2018-02-26T08:15:08.293 回答