[React] React Quill 에디터 라이브러리 사용 2-이미지 처리/편집 중 (feat.react-quill-new)

🔔 [관련 정리 리스트]

• React Quill 1-에디터 사용
• React Quill 2-이미지처리(편집중/참고만)
• React Quill 3-이미지처리(편집완료/사용)
• React Quill 4-이미지 리사이즈

---

* 2는 에디터 작성 시 바로 이미지 치환 되는 방법이라 참고만 했음(3-작성 완료 버튼 클릭시 이미지 치환되는 방법으로 진행함)

위에 1에서는 에디터 기본 기능을 사용하는 방법을 알아봤다.

이번 2에서는 에디터 내 이미지 처리에 대한 방법을 정리했다.

 

에디터에서 이미지를 그대로 사용하게 되면 이미지가 기본적으로 이미지 자체를 base64로 인코딩한 형식으로 삽입되는데 대용량 이미지를 처리할 때 비효율적일 수 있으며 너무 긴 데이터라 그대로 서버에 넘겨주기엔 무리다. 따라서 기존 홈페이지에서 S3 이미지를 사용한 것 처럼 S3에서 이미지를 사용하는 작업이 필요했다.

따라서 현재 이미지 자체를 올리는 작업 대신 아래 과정으로 변경이 필요했다.

에디터에서 이미지를 선택하면 → API 전송:서버에 이미지 업로드(S3)  →  S3 이미지 URL 내려받기 → 에디터 내 이미지 삽입

 

아래는 위 과정을 적용시킨 코드이다.

에디터내에서 글을 작성 중에 이미지 첨부 시 바로 S3이미지 URL 을 얻어오고 현재 작성중인 에디터에 바로 반영이 된다.

import { useMemo, useRef } from 'react';
import ReactQuill from 'react-quill-new';
import 'react-quill-new/dist/quill.snow.css';

interface ReactQuillEditorProps {
  style?: any;
  value: string;
  onChange: (value: string) => void;
}

function ReactQuillEditor({ style, value, onChange }: ReactQuillEditorProps) {
  const quillRef = useRef<ReactQuill | null>(null);
  const imageHandler = async () => {
    if (!quillRef.current) return;

    const quillInstance: any = quillRef.current.getEditor();
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.click();

    // input 클릭 시 파일 선택창이 나타남
    input.onchange = async () => {
      //이미지를 담아 전송할 formData
      const file = input.files?.[0];

      try {
        //업로드 된 S3 이미지 url을 가져오기
        /*      const url = await PostAPI.uploadImg(file); */ //api연결하기
        const url = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1c9zAnn02wcDmYlMABoRgWoxn4wccXzUpUg&s'; //더미 url
        const range = quillInstance.getSelection(true); //useRef를 통해 에디터에 접근한 후 현재 커서 위치를 얻음(true:만약 선택된 영역이 없으면 커서가 깜빡이고 있는 위치를 얻음)
        quillInstance.insertEmbed(range.index, 'image', url); //  에디터의 현재 커서 위치에 이미지를 삽입
        quillInstance.setSelection(range.index + 1); //이미지를 삽입한 후 커서를 이미지 뒤로 이동시키는 코드
      } catch (error) {
        console.log(error);
      }
    };
  };

  const modules = useMemo(
    () => ({
      toolbar: {
        container: [
          [{ header: [1, 2, 3, 4, 5, false] }],
          ['bold', 'italic', 'underline', 'strike' /* , 'blockquote' */],
          [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
          [{ color: [] }, { background: [] }],
          ['link', 'image', 'video'],
          ['clean']
        ],
        handlers: {
          image: imageHandler //imageHandler를 통해 에디터 이미지에 적용시켜줌
        }
      }
    }),
    []
  );

  return (
    <>
      <ReactQuill ref={quillRef} /* ref추가 */ style={style} modules={modules} value={value} onChange={onChange} />
    </>
  );
}
export default ReactQuillEditor;

 

참고사이트

 

Quill editor 내부의 사진 서버로 보내기

 

본문 이미지 저장 로직을 개선해서 서버 성능 개선하기.

 

Quill React 에디터 사용해보기 (이미지 업로드 및 사이즈 조절)

 

(Next.js) (React) react-quill 에디터로 이미지 처리하기