NEXT js 에서 react-quill 사용하기

많은 분들이 NEXT js에서 react-quill 사용하려 노력하신 결과로

아래의 코드는 많이 있을테니 간단히 설명하고 넘어가기~

 

변경전

import ReactQuill from 'react-quill'

 

변경후

const ReactQuill = dynamic(() => import("react-quill"), {
    ssr: false,
});

 

next js에서 제공하는 dynamic import 활용하여 빌드타임이 아닌 런타임에 불러오도록 함

---

이제 문제는 그안에 Quill도 어떻게 가져오는지 그리고 안에서 어떻게 Quill에 저장하여 사용하는지 인거 같다

 

많이 찾아봤지만... 그어떠한 것도 확실한 답이 되지 않았다...

 

나도 더 찾아보고 수정해봤지만 나의 경우를 설명해보려한다.!!

 

import dynamic from "next/dynamic";

const ReactQuill = dynamic(
    async () => {
        const { default: RQ } = await import("react-quill");  
        const { default: ImageResize } = await import("quill-image-resize");
  
        RQ.Quill.register("modules/ImageResize", ImageResize);
  
        return function forwardRef({ forwardedRef, ...props }) {
            return <RQ ref={forwardedRef} {...props} />;
        };
    },
    {
        ssr: false,
    }
);

ReactQuill 을 dynamic import 활용하여 불러오는 상황에서

 

리사이즈 또한 불러와 RQ.Quill 에 등록해 주었다

 

그 후 포맷에서 추가

 

const modules = {
    toolbar: [
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        [{ font: [] }],
        [("bold", "italic", "underline", "strike", "blockquote")],
        [
            { list: "ordered" },
            { list: "bullet" },
            { indent: "-1" },
            { indent: "+1" },
        ],
        ["link", "image", "video"],
        [{ align: [] }, { color: [] }, { background: [] }, "code-block"],
        ["clean"],
    ],
    ImageResize: {}, //추가
};

 

리사이즈까지 등록하는 방법은 해결햇다..!!!!

 

폰트 한글 추가 하고 싶은데... 

방법 아시는분 살려주세요...

도움이 되시거나 문제가 있다면 연락 부탁드리겠습니다 🙏