[Toast-UI Editor] 이미지 업로드 기능 변경

Toast UI Editor에서 이미지 업로드를 하면 base64 형식으로 에디터에 입력됩니다.
base64 형식은 해상도가 올라갈수록 글자수가 어마어마하게 늘어나서, servlet의 max-file-size와 max-request-size를 초과할 수 있습니다. 그리고 그대로 DB에 저장하고 싶지 않겠죠?

 
Toast UI Editor API 문서를 확인해 보면 다음과 같은 기능이 존재합니다.

https://nhn.github.io/tui.editor/latest/ToastUIEditorCore

 
 
다음은 addImageBlobHook으로 file에서 받아온 이미지 데이터를 업로드 후 url로 처리하는 로직입니다.
 

const editor = new toastui.Editor({
    el: document.querySelector(selectors),
    height: '300px',
    initialEditType: 'wysiwyg',
    previewStyle: 'vertical',
    hooks: {
        addImageBlobHook: (blob, callback) => uploadImages(blob, callback)
    }
});

const uploadImages = (blob, callback) => {
    let formData = new FormData();
    formData.append("images", blob);

    $.ajax({
        type: 'POST',
        enctype: 'multipart/form-data',
        url: '/common/fileUpload',
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false
    }).fail(function() {
        callback('image_load_fail');
    }).done(function(data) {
        callback(data);
    });
}

 

@PostMapping("/fileUpload")
@ResponseBody
public ResponseEntity<String> fileUpload(MultipartFile images) {

	// image upload

	return ResponseEntity.ok(imageUrl);
}

 

 
아쉬운 점은 이미지 사이즈를 리사이징 할 수가 없습니다.
그리고 Toast UI API 문서가 친절하지 않음..
 
만약 아예 이미지 기능을 사용하고 싶지 않다면 toolbar에서 제거할 수도 있습니다.

const editor = new toastui.Editor(...);
editor.removeToolbarItem("image");

 
 
 
[Reference]
https://ui.toast.com/tui-editor