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

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 に答える