React-Quill 이미지 드랍 및 리사이즈

React-Quill 에디터의 기능을 확장하기 위해 이미지 드랍 및 이미지 리사이즈 기능을 추가하는 방법을 설명하겠습니다. 이 기능들은 사용자가 텍스트 에디터 내에서 이미지를 더욱 효과적으로 관리할 수 있게 해줍니다.

모듈 설치

먼저, 이미지 드랍 및 이미지 리사이즈 모듈을 사용하기 위해서는 해당 npm 패키지를 설치해야 합니다.

npm install quill-image-drop-module quill-image-resize-module-react

모듈 임포트

설치가 완료된 후, 이러한 모듈을 React 프로젝트에 임포트합니다.

import ImageResize from 'quill-image-resize-module-react';
import { ImageDrop } from "quill-image-drop-module";

Quill에 모듈 등록

Quill 에디터에 이미지 드랍과 이미지 리사이즈 모듈을 등록합니다. 이는 Quill.register 메서드를 사용하여 수행됩니다.

Quill.register("modules/imageDrop", ImageDrop);
Quill.register('modules/imageResize', ImageResize);

모듈의 기능과 작동 원리

ImageDrop 모듈

이 모듈은 사용자가 이미지 파일을 에디터 위로 드래그 앤 드롭할 때 해당 이미지를 자동으로 삽입하는 기능을 제공합니다. 이는 사용자 경험을 향상시키며, 이미지 업로드 및 삽입 과정을 간소화합니다.

ImageResize 모듈

이미지 리사이즈 모듈은 에디터 내에서 이미지의 크기를 직접 조정할 수 있는 기능을 추가합니다. 사용자는 이미지의 모서리를 클릭하고 드래그하여 이미지 크기를 쉽게 변경할 수 있습니다. 이 모듈은 특히 콘텐츠 편집에서 정밀한 이미지 크기 조절이 요구될 때 유용합니다.
모듈 설정 및 사용
모듈을 등록한 후, ReactQuill 컴포넌트의 modules 프로퍼티에 이 모듈들을 포함시킬 수 있습니다.

아래는 modules 객체 내에서 이미지 드랍과 리사이즈 기능을 설정하는 예제입니다.

const modules = useMemo(() => ({
    toolbar: {
        // 툴바 설정 생략
    },
    imageDrop: true, // 이미지 업로드 함수가 있을시 imageDrop: imageHandler,
    imageResize: {
        modules: ['Resize', 'DisplaySize']
    }
}), []);