Summernote 在 img 中添加类答案

【问题标题】：summernote add class in imgSummernote 在 img 中添加类
【发布时间】：2014-10-02 22:05:30
【问题描述】：

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

【问题讨论】：

运气好吗？我正在考虑在图像实际显示时（而不是在编辑器中）通过 jquery 添加 img-responsive 类。

标签： javascript twitter-bootstrap summernote

【解决方案1】：

这可能为时已晚，但我自己用 jQuery 做到了。

在您的 .js 或模板底部：

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

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

【讨论】：

【解决方案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();
        }
    });
};

【讨论】：

【解决方案3】：

我想你可以通过 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);

【讨论】：