[React] Toast-UI Editor 이미지 업로드/드래그 첨부 막기 방법

# Toast-UI Editor 이미지 업로드 기능 제거 방법

Toat-UI Editor에서 이미지를 업로드하면,

multipart 형식으로 파일 첨부가 되는 것이 아니라 

이미지 데이터 자체를 base64로 인코딩하여 img 태그의 src로 주입해버린다.

사이즈가 큰 이미지 파일을 이 상태 그대로 DB에 저장하고 싶지 않다면, 다른 방식을 생각해야 할 것이다.

이 글에서는 Toat-UI Editor의 이미지 첨부 자체를 막는 방법을 정리한다.

 

* 이미지를 첨부 파일로 서버에 전송하는 방법은 아래글 참고

[React] Toast-UI Editor 이미지 파일 서버 업로드 방법 (base64 인코딩 X)

---

방법은 코드 한줄이다.

 

Editor.prototype.getInstance().removeHook('addImageBlobHook');

 

원리는 이렇다.

 

Toast-UI 에디터에서 이미지를 업로드 하면,

아래의 addImageBlobHook(Blob | File, Callback) 이 동작하여 img src에 이미지 데이터를 주입한다.(base64로 인코딩하여)

 

이걸 제거해버리는 것이다.

그러면 이미지 업로드 기능 자체가 작동하지 않게 된다.

 

예제 코드는 아래와 같다.

import { useEffect, useRef } from 'react';

// Toast 에디터
import { Editor } from '@toast-ui/react-editor';
import '@toast-ui/editor/dist/toastui-editor.css';

export default function ToastEditor() {
  // Editor DOM
  const editorRef = useRef();

  useEffect(() => {
    // 이미지 업로드 막기
    editorRef.current.getInstance().removeHook('addImageBlobHook');
  }, []);

  return (
    <div>
      <Editor
        ref={editorRef}
        placeholder="내용을 입력해주세요."
        previewStyle="vertical"
        height="300px"
        initialEditType="wysiwyg"
        toolbarItems={[['bold', 'italic', 'strike']]}
      ></Editor>
    </div>
  );
}

---

이제 에디터에 이미지를 드래그 해도, 결코 첨부되지 않을 것이다.

 

도움이 되셨길.