Summernote 이미지 1:1 비율 리사이즈 플러그인

summernote-image-resize-original.js

/**
 * Summernote Image Resize 1:1 Ratio Plugin
 *
 * copyright 2018 [blood72]
 * email: [email protected]
 * license: MIT License.
 */
(function (factory) {
  if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory);
  } else if (typeof module === 'object' && module.exports) {
    module.exports = factory(require('jquery'));
  } else {
    factory(window.jQuery);
  }
}(function ($) {
  $.extend(true,$.summernote.lang, {
    'en-US': { /* US English(Default Language) */
      imageResizeOriginal: {
        title: '1:1 Ratio',
        tooltip: '1:1 Ratio resize',
      }
    },
    'ko-KR': {
      imageResizeOriginal: {
        title: '1:1 비율',
        tooltip: '1:1 비율로 맞추기',
      }
    }
  });
  $.extend($.summernote.options, {
    imageResizeOriginal: {
      customTitle: undefined,
      customTooltip: undefined,
      relativeRatio: true,
    }
  });
  $.extend($.summernote.plugins, {
    /**
     *  @param {Object} context - context object has status of editor.
     */
    'imageResizeOriginal': function (context) {
      var ui        = $.summernote.ui;
      var $editable = context.layoutInfo.editable;
      var options   = context.options;
      var lang      = options.langInfo;
      context.memo('button.imageResizeOriginal', function () {
        var contents = options.imageResizeOriginal.customTitle ? options.imageResizeOriginal.customTitle : lang.imageResizeOriginal.title;
        var tooltip  = options.imageResizeOriginal.customTooltip ? options.imageResizeOriginal.customTooltip : lang.imageResizeOriginal.tooltip;
        var button = ui.button({
          contents: '<span class="note-fontsize-10">' + contents + '</span>',
          tooltip: tooltip,
          click: function () {
            context.invoke('imageResizeOriginal.resize');
          }
        });
        return button.render();
      });
      this.resize = function () {
        const $target = $($editable.data('target'));
        var width = $target[0].naturalWidth;
        if (options.imageResizeOriginal.relativeRatio) {
          width = Math.min(width, $editable.width());
        }
        $($editable.data('target')).css({
          width: width,
          height: ''
        });
        context.invoke('editor.afterCommand');
      }
    }
  });
}));

my english is bad

Summernote Image Resize 1:1 Ratio Plugin

[option]

customTitle
customTooltip

• default is undefined. it supports only en-EN, ko-KR. other language need to customize.

relativeRatio

• true : default. resize based on summernote editor width
• false : resize to original image size (ignore editor width)

[example]

$("#summernote").summernote({
  popover: {
    image: [
      ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25', 'imageResizeOriginal']],
      ['float', ['floatLeft', 'floatRight', 'floatNone']],
      ['remove', ['removeMedia']]
    ]
  },
  imageResizeOriginal: {
    relativeRatio: true,
    customTitle: undefined,
    customTooltip: undefined,
  }
});

[test]

summernote 0.8.9

Internet Explorer 11
Microsoft Edge
Google Chrome