ReactQuill 리액트 글쓰기 에디터 이미지 드롭하여 삽입하기

ReactQuill  을 사용하면서

기본만 사용하기엔 불편한 부분들이 많다.

 

정말 쉬운 작업으로 이미지를 드롭하여 인서트 할수 있는 기능을 소개한다.

import ReactQuill , {Quill} from "react-quill"
import '../../assets/css/quill.snow.css'

import { ImageDrop } from "quill-image-drop-module";
Quill.register("modules/imageDrop", ImageDrop);

    const modules = useMemo(()=>{
        return {
            // table: true,
            // tableUI: true,
            toolbar: {
                container: toolbarOptions,
            },
            // ImageResize: { modules: ['Resize'] },
            imageDrop: true,
            clipboard: {
                matchVisual: false              // toggle to add extra line breaks when pasting HTML:
            },

        }
    })

 

드롭모듈 설치하고 , 모듈에 imageDrop: true, 한줄이면 설정 끝이다.

 

비교적 간단하니 사용하지않아도 넣으면 개꿀