[React] React Quill 에디터 라이브러리 사용 4-이미지 리사이즈(quill-image-resize)

🔔 [관련 정리 리스트]

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

 

---

react-quill-new 라이브러리를 사용하여 에디터 기능을 만들었다.

이미지를 넣으면 아래와 같이 이미지가 그대로 넣어져서 조절이 불가능하다.

따라서 이번엔 이미지 조절을 위해 quill-image-resize를 사용해보고자 한다. 

quill-image-resize-module-ts

 

설치

npm install quill-image-resize-module-ts

react-quill-new 라이브러리와 호환되는 것을 찾느라 여러 라이브러리를 적용해봤다.

react-quill로도 바꿨는데 호환이 안되는지 오류가 났다.( "@xeger/quill-image-actions" , "@xeger/quill-image-formats 는 적용했더니 점선은 나타나는데 리사이즈 조정핸들이 안보였고, quill-image-resize-module-react, quill-image-resize,quill-image-resize-module은 에러가 남)

위의 quill-image-resize-module-ts 라이브러리로 적용해보니 react-quill, react-quill-new 둘 다 잘 적용되어 해당 라이브러리로 적용했다.

 

사용

import { ImageActions } from '@xeger/quill-image-actions';
import { ImageFormats } from '@xeger/quill-image-formats';
import { useMemo, useRef } from 'react';
import ReactQuill, { Quill } from 'react-quill-new';
import 'react-quill/dist/quill.snow.css'; 
import {ImageResize} from 'quill-image-resize-module-ts'; //1.import

if (typeof window !== 'undefined' && window.Quill) {
  window.Quill = Quill;
} //2. Quill을 window 전역 객체에 할당하여 전역으로 사용

Quill.register('modules/ImageResize', ImageResize); //3.Quill 모듈을 등록

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

function ReactQuillEditor({ style, value, onChange }: ReactQuillEditorProps) {
  const quillRef = useRef<ReactQuill | null>(null);
 
  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']
        ],  
      },
        ImageResize: {
        modules: ['Resize', 'DisplaySize']
      }//4.Quill 이미지 Resize 옵션 설정(Resize:이미지 드래그 크기 조절/DisplaySize:현재 이미지 크기 표시)
    }),
    []
  );

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

위 코드와 같이 사용을 했다. (자세한 설명은 주석 참고)

코드 중 아래 부분을 넣어야 적용이 가능하다.

if (typeof window !== 'undefined' && window.Quill) {
  window.Quill = Quill;
}

위의 코드를 적용하지 않으면 Cannot read properties of undefined (reading 'register') 오류가 나는데

Quill 객체가 제대로 초기화되지 않거나 Quill.register()가 호출되기 전에 Quill 객체에 접근하려고 할 때 발생할 수 있다.

따라서 Quill모듈을 window.Quill로 글로벌하게 선언하여 Quill이 window 객체에 접근 가능하도록 설정한 후에 Quill.register()를 호출하는 방법을 사용하여 해결했다.

 

결과 화면