initSummernotes.js

/**
 * textarea를 summernote로 변경
 * require ['lodash', 'axios', 'summernote', 'jQuery']
 * reference: https://summernote.org/deep-dive/
 * 
 * @param {any} target summernote를 적용할 element id || class
 * @param {any} options options 기본 옵션에 merge 시킬 세부 옵션
 * @returns jQuery Element
 */
var initSummernotes = function(target, options) {
  var $target = $(target)
  var defaultOptions = {
    lang: 'ko-KR',
    height: 300, // set editor height
    minHeight: null, // set minimum height of editor
    maxHeight: null,
    toolbar: [
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['fontsize', ['fontsize']],
      ['color', ['color']],
      ['insert', ['picture', 'link']],
      ['misc', ['undo', 'redo', 'codeview', 'help']]
    ],
    popover: {
      image: [
        ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
        ['float', ['floatLeft', 'floatRight', 'floatNone']],
        ['remove', ['removeMedia']]
      ],
      link: [
        ['link', ['linkDialogShow', 'unlink']]
      ],
    },
    dialogsInBody: true,
    callbacks: {
      onImageUpload: function(image) {
        var fd = new FormData()
        fd.append('image', image[0])
        // 세부 폴더명 설정
        fd.append('folder', 'board')

        axios.post("/data2image", fd)
        .then(function(response) {
          // response.data의 모형은 서버에서 반환된 결과에 따른다
          $target.summernote('insertImage', response.data.src, function($img) {
            // image의 width를 css에서 관리하기 위해 style 속성을 제거한다
            $img.removeAttr('style')
          })
        })
        .catch(function(error) {
          console.log(error)
        })
      },
      onMediaDelete: function($target, editor, $editable) {
        axios.delete("/data2image", {
          data: {
            src: $target.attr('src')
          }
        })
        .then(function() {
          $target.remove()
        })
        .catch(function(error) {
          console.log(error)
        })
      }
    }
  }

  var mergedOptions = _.merge(defaultOptions, options)
  if ($target.length === 1) {
    return $target.summernote(mergedOptions)
  } else {
    return $target.map(function($item) {
      return $item.summernote(mergedOptions)
    })
  }
}