[React] SSR 환경에서 React Quill Editor 사용 방법

React Quill Editor (SSR)

Next.js + React-Quill + Image Resize Module

⚔ React Quill, Image Resize Module 설치

npm install react-quill
npm install quill-image-resize

⚔ quillEditor.js

✔ quill editor는 ssr을 지원해주지 않음

1. dynamic을 사용해 동적으로 import
2. ssr: false 옵션 추가

const ReactQuillComponent = dynamic(
   async () => {
      const { default: Rq } = await import("react-quill");
      const { default: ImageResize } = await import("quill-image-resize");
      ...
   },
   { ssr: false, }
);

✔ module을 추가해주기 위해선 register 필요

1. default 키워드로 import한 모듈의 이름을 변수로 선언해서 사용 가능
2. Rq.Quill.register로 모듈 추가

Rq.Quill.register("modules/imageResize", ImageResize);

✔ return 값이 실제로 뿌려지는 editor component

1. props를 사용해 기본 module에 imageResize 모듈을 추가 후 return

return function forwardRef({ forwardedRef, ...props }) {
   const newProps = {
      ...props,
      modules: {
         ...props.modules,
         imageResize: {
            parchment: Rq.Quill.import("parchment"),
            modules: ["Resize"],
         },
      },
   };
   return
   <Rq ref="{forwardedRef}" {...newProps} />;
};

✔ ReactQuillComponent 옵션

1. onChange: editor param의 editor.getHTML()을 통해 editor의 HTML 값을 얻음
2. forwardedRef: ref값 설정, editor에 접근 가능

<ReactQuillComponent
   ...
   onChange={(content, delta, source, editor) => setValue(editor.getHTML())}
   forwardedRef={editorRef} />

⚔ index. js

✔ useRef를 사용해 editor에 접근

1. editorRef.current.focus()로 editor에 focus를 줌

const editorRef = useRef(null);
...
editorRef.current.focus();

✔ editor 내용 validation

1. enter값, 공백 등 내용이 없는 경우 정규식 표현 /<(\/p|p|\/br|br)([^>]*)>|(\s*)/g

if (!value.replace(/<(\/p|p|\/br|br)([^>]*)>|(\s*)/g, "")) {
   alert("Please enter your content...");
   ...
}

⚔ 보완점

1. image를 리사이징해서 저장했을 경우 html 값은 제대로 저장
   but, 글 수정 시 html을 불러오면 image의 style이 적용되지 않고 원본으로 나타남
2. editor 크기를 고정 시 image resize icon이 editor 밖으로 표시됨

Github

https://github.com/ttony-kim/react-quill-with-image-resize

Ref

https://github.com/zenoamaro/react-quill