summernote 이미지 업로드 커스텀 - 02(버전업, 수정)

2015/09/15 

현재, Summernote 최신 버전으로 업데이트 하면서, 변경된 점을 기록합니다.

버전업이 되면서 실제로는 이미지를 insert 하기 더 쉬워 졌다고 볼 수 있습니다.

Summernote 에디터를 초기화 한 후에 아래와 같이 코드를 작성하면, 에디터에 이미지가 쉽게 삽입이 됩니다.

insertImage Function에 이미지 Url을 인자값으로 가집니다.

$('#summernote').summernote("insertImage", image.url);

summernote 옵션 설정에서 onImageUpload 에서 바로 ajax를 통해 file 을 업로드하고, 이미지 url을 리턴 받아서 $('#summernote').summernote("insertImage", image.url); 를 사용하면 바로 적용할 수 있겠습니다.

하지만, 중요한 점은 에디터가 하나만 존재해야 한다는 점입니다.

저같은 경우 문제점이....한 화면에 다수의 서머노트(Summernote) 에디터를 필요로 했습니다.

그래서 위의 방법 처럼 insertImage 기능을 사용할 수 없었어요.

그래서 summernote.js 파일을 직접 뜯어서 분석하여(이미지 업로드 부분만..ㅎㅎ)

약간 수정한 후 아래의 코드 처럼 변경하였습니다.

기존 summernote. 코드

this.insertImages = function (layoutInfo, files) {
  var $editor = layoutInfo.editor(),
      $editable = layoutInfo.editable(),
      $holder = layoutInfo.holder();
 
  var callbacks = $editable.data('callbacks');
  var options = $editor.data('options');
 
  // If onImageUpload options setted
  if (callbacks.onImageUpload) {
    bindCustomEvent($holder, callbacks, 'image.upload')(files);
  // else insert Image as dataURL
  } else {
    $.each(files, function (idx, file) {
      var filename = file.name;
      if (options.maximumImageFileSize && options.maximumImageFileSize < file.size) {
        bindCustomEvent($holder, callbacks, 'image.upload.error')(options.langInfo.image.maximumFileSizeError);
      } else {
        async.readFileAsDataURL(file).then(function (sDataURL) {
          modules.editor.insertImage($editable, sDataURL, filename);
        }).fail(function () {
          bindCustomEvent($holder, callbacks, 'image.upload.error')(options.langInfo.image.maximumFileSizeError);
        });
      }
    });
  }
};

변경된 summernote.js 코드

위 소스 callbacks.onImageUplaod의 true 부분에서

bindCustomEvent 부분을 아래와 같이 변경하였습니다.

bindCustomEvent($holder, callbacks, 'image.upload')(files, modules, $editable);
 

이렇게 변경하면, summernote option 설정에서 인자값을 아래와 같이 두개 더 설정하시고 사용할 수 있습니다.

- summernote 초기화

        $('.summernote').summernote({
            onImageUpload : function(files, modules, editable) {
                sendFile(files, modules, editable);
            },
            lang : 'ko-KR'
        });

- 이미지 업로드 Function

function sendFile(files, modules, editable) {
  for(var i=0; i < files.length; i++){
    (function(i) {
      var data = new FormData();
      data.append("uploadFile", files[i]);
      $.ajax({
        data : data,
        type : "POST",
        url : "/imageUpload",
        success : function(data) {
          modules.editor.insertImage(editable, data.url, files[i].name);
        }
      });
    })(i);
  }
}

이렇게 하니, 다중 Summernote 사용 시에서 각자 Summernote에 이미지 업로드 후 입력이 가능해졌습니다.

버전업이 되면 더 편리하게 수정이 되겠지만^^ 일단은 당분간은 이렇게 사용해야겠네욥.

github에 comment를 달아야하나... 영어를 못해서 킁...(한국분이 메인이신것같긴하던데 ㅎㅎㅎㅎ)

summernote를 개발해주시는 분께 무한한 감사를 드리며, 이 글을 마칩니다.