React RichTextEditor Image Upload - reactQuill

💡 RichTextEditor에서 이미지 사용 시 내부에 base64로 이미지가 올라가게 되는데 이는 너무 긴 문자열을 사용하기 때문에 이미지가 여러장 올라간다면 더 큰 문제를 야기할 것이다. 그러므로 이미지를 먼저 서버에 올리고 그 주소를 반환받아 이미지 태그로 사용하는 방식을 채택했다.

react-quill

Image Upload with ReactQuill

ReactQuill의 modules : { handlers : { image : imageHandler }} 옵션으로 이미지 업로드를 핸들링 할 수 있는데 이미지 파일을 먼저 서버에 저장 요청을 하고 반환받은 주소로 에디터의 현재 커서에 삽입하는 방식입니다.

// 이미지 업로드 요청 API
const imageApi = async (img: File): Promise<APIUploadType> => {
    const formData = new FormData();
    formData.append('files', img);
    return client.post('board/upload', formData);
  };
// 이미지 핸들러 함수
const imageHandler = () => {
	// 빈 fileInput으로 이미지를 받는다.
  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');
  input.click();

  input.addEventListener('change', async () => {
    if (input.files === null) {
      DC.alert('파일이 준비되지 않았습니다. 다시 시도해 주세요.');
      return;
    }

    if (quillRef.current === null) {
      DC.alert('텍스트 작성기 오류입니다. 새로고침 해주세요.');
      return;
    }

    const file = input.files[0];

    try {
      //이미지 업로드 API 요청
      const res: APIUploadType = await imageApi(file);
      const imgUrl = '서버 URL' + res.fileImg.split('/image/')[1];
      const editor = quillRef.current.getEditor();
      const range = editor.getSelection();
      if (range === null) {
        DC.alert('텍스트 작성기 오류입니다. 새로고침 해주세요.');
        return;
      }
      // 에디터에 반환받은 주소 값의 이미지 삽입
      editor.insertEmbed(range.index, 'image', imgUrl);
      if (fileImg === '') {
        setFileImg(imgUrl);
      }
      // 커서를 이미지 뒤로 이동
      editor.setSelection({ ...range, index: range.index + 1 });
    } catch (error) {
      console.log(error);
    }
  });
}

전체 코드

interface QuillStateType {
  content: string;
  setContent: React.Dispatch<React.SetStateAction<string>>;
  fileImg: string;
  setFileImg: (fileImg: string) => void;
}

function QuillCustom({ content, setContent, fileImg, setFileImg }: QuillStateType) {
  const quillRef = useRef(null) as RefObject<ReactQuill>;

  const imageApi = async (img: File): Promise<APIUploadType> => {
    const formData = new FormData();
    formData.append('files', img);
    return client.post('board/upload', formData);
  };

  const imageHandler = () => {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.click();

    input.addEventListener('change', async () => {
      if (input.files === null) {
        DC.alert('파일이 준비되지 않았습니다. 다시 시도해 주세요.');
        return;
      }

      if (quillRef.current === null) {
        DC.alert('텍스트 작성기 오류입니다. 새로고침 해주세요.');
        return;
      }

      const file = input.files[0];

      try {
        //이미지 업로드 API
        const res: APIUploadType = await imageApi(file);
        console.log(res);
        const imgUrl = '서버 URL' + res.fileImg.split('/image/')[1];
        const editor = quillRef.current.getEditor();
        const range = editor.getSelection();
        if (range === null) {
          DC.alert('텍스트 작성기 오류입니다. 새로고침 해주세요.');
          return;
        }
        editor.insertEmbed(range.index, 'image', imgUrl);
        if (fileImg === '') {
          setFileImg(imgUrl);
        }
        editor.setSelection({ ...range, index: range.index + 1 });
      } catch (error) {
        console.log(error);
      }
    });
  };

  const modules = useMemo(
    () => ({
      toolbar: {
        container: [
          [{ header: '1' }, { header: '2' }, { font: [] }],
          [{ size: [] }],
          ['bold', 'italic', 'underline', 'strike', 'blockquote'],
          [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
          ['link', 'image'],
          ['clean'],
        ],
        handlers: { image: imageHandler },
      },
      clipboard: {
        matchVisual: false,
      },
    }),
    [],
  );

  const formats = [
    'header','font','size','bold','italic','underline','strike','blockquote',
    'list','bullet','indent','link','image','video',
  ];

  return (
    <ReactQuill
      ref={quillRef}
      value={content}
      onChange={setContent}
      modules={modules}
      formats={formats}
      theme="snow"
    />
  );
}

export default QuillCustom;