react-quill + next.js image resize

 

앞서서 react-quill로 s3에 이미지 저장하고 등록하는 코드까지 구현했다.

근데 각자의 이미지 크기가 있기에 크기가 죄다 중구난방이였다...ㅎ

그리하여 quill image를 resize 해줄수 있는 라이브러리를 장차 3일에 걸쳐 찾아보게되었다 (다른거 검색하다 잠깐 찾아보는 3일..?)

webpack을 건드려야한다는 아이도 있고 정상적으로 구동이 안된다는 아이들도 많았다,,,

그리하다 찾게된 라이브러리인데 매우 간단하게 구현하여 공유차 작성해본다.

---

xeger/quill-image

사용방법도 매우매우 쉽다.

우선 설치부터 진행하자

npm install @xeger/quill-image-actions --save-prod
npm install @xeger/quill-image-formats --save-prod

이후 매우매우 간단한 코드 작성

import { Quill } from 'react-quill';
import { ImageActions } from '@xeger/quill-image-actions';
import { ImageFormats } from '@xeger/quill-image-formats';

Quill.register('modules/imageActions', ImageActions);
Quill.register('modules/imageFormats', ImageFormats);

 

 

이와 같이 작성하면 된다는데 나는 Next.js를 사용하고 있기에 이와같이 작성하였다.

ref와 여러가지 때문에 정신 없어 보이지만 추가해준거는 import 2줄과 Quill에 register를 해준 2줄이 끝이다

import { ImageActions } from '@xeger/quill-image-actions';
import { ImageFormats } from '@xeger/quill-image-formats';

const ReactQuill = dynamic(
  async () => {
    const { default: RQ } = await import("react-quill");

    RQ.Quill.register("modules/imageActions", ImageActions);
    RQ.Quill.register("modules/imageFormats", ImageFormats);

    const DynamicReactQuill = ({
      forwardedRef,
      ...props
    }: {
      forwardedRef: React.Ref<any>;
      [key: string]: any;
    }) => <RQ ref={forwardedRef} {...props} />;

    DynamicReactQuill.displayName = "DynamicReactQuill";
    return DynamicReactQuill;
  },
  {
    ssr: false,
  }
);

 

 

추가로 포맷과 모듈도 변경해줘야 한다하여 추가하였다.

포맷은 'align' ,'float' 두개를 추가하였고 

모듈은 imageActions:{},imageFormats:{}  그리고 toolbar에 align,clean을 추가하였다

const formats = [... 'align', 'float']; //추가

const modules = useMemo(
      () => ({
        toolbar: {
          container: [
            ...,
            [{ align: [] }], //추가
            ["clean"],	//추가
          ],
          handlers: {
            image: imageHandler,
          },
        },
        imageActions: {}, //추가
        imageFormats: {}, //추가
      }),
      []
    );

 

 

imageActions와 imageFormats 위치 잘 설정해야한다.!

위와 같이 완료되었다면 이미지 사이즈 조절과 이미지 옆에도 글을 작성할수 있게 기능이 완성된다.!!!!

django admin에서만 열심히 쓰던 에디터 프론트에서도 활용해보아야지이


구글링 출처
https://velog.io/@skdbsqls/230823-React-Quill-Image-Resize-%EB%A9%94%EB%AA%A8%EB%A6%AC

230823 React Quill, Image Resize | 메모리 | Zustand