20240116 TIL react-quill image resize @xeger/quill-image-formats/actions

목표

• 이미지 리사이즈

새로 알게 된것/ 오늘의 코드

react-quill 이미지 리사이즈 라이브러리 비교

다운로드순으로는 quill-image-resize>quill-image-resize-module-react> quill-image-resize-module-react-ts > @xeger/quill-image-formats/actions 다. 

 

하지만 

각 라이브러리별 생성날짜와 업데이트날짜를 보면 @xeger/quill-image-formats/actions 가 가장 최근까지 업데이트 된 것을 확인할 수 있다. 

 

하지만 직접 써봐야 알 수 있을 것 같아 다 사용해보려고 시도했다.

quill-image-resize => import 오류 진행 불가
quill-image-resize-module-react => import 오류 진행 불가
quill-image-resize-module-react-ts => import성공 하지만 기능 수행 안됨
@xeger/quill-image-formats/actions => import 성공, 기능 구현 성공

라는 결과가 나와서 @xeger/quill-image-formats/actions를 사용하게 되었다.

물론 @xeger/quill-image-formats/actions 쉽게 사용한 것은 아니었다. 후..

 

사용방법

yarn add 하기

 yarn add @xeger/quill-image-formats @xeger/quill-image-actions

우선 import를 해준다

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

Quill 편집기에 사용자 지정 모듈을 등록하기

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

모듈에 추가해주기(내 코드에선 없어도 문제가 없긴했다.)

  const modules = useMemo(
    () => ({
      imageActions: {},
      imageFormats: {},
      // 툴바 설정
      toolbar: {
        container: [
          [{ header: [1, 2, 3, 4, 5, 6, false] }], // header 설정
          ['bold', 'italic', 'underline', 'strike'], // 굵기, 기울기, 밑줄 등 부가 tool 설정
          ['image', 'video'], // 링크, 이미지, 비디오 업로드 설정
          [{ color: [] }, { background: [] }] // 정렬, 글자 색, 글자 배경색 설정
          // ["clean"], // toolbar 설정 초기화 설정
        ],

        // 핸들러 설정
        handlers: {
          image: imageHandler // 이미지 tool 사용에 대한 핸들러 설정
        },
        ImageResize: {
          modules: ['Resize']
        }
      }
    }),
    []
  );

툴바 포맷에 추가하기

  const formats = [
    'header',
    'bold',
    'italic',
    'underline',
    'strike',
    'video',
    'image',
    'color',
    'background',
    'height',
    'width'
  ];

 

height와 width가 필요한 툴이다! 

전체적인 느낌은 

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

const Quill : React=()=>{
Quill.register('modules/imageActions', ImageActions);
Quill.register('modules/imageFormats', ImageFormats);
const modules = useMemo(
    () => ({
      imageActions: {},
      imageFormats: {},
      // 툴바 설정
      toolbar: {
        container: [
          [{ header: [1, 2, 3, 4, 5, 6, false] }], // header 설정
          ['bold', 'italic', 'underline', 'strike'], // 굵기, 기울기, 밑줄 등 부가 tool 설정
          ['image', 'video'], // 링크, 이미지, 비디오 업로드 설정
          [{ color: [] }, { background: [] }] // 정렬, 글자 색, 글자 배경색 설정
          // ["clean"], // toolbar 설정 초기화 설정
        ],

        // 핸들러 설정
        handlers: {
          image: imageHandler // 이미지 tool 사용에 대한 핸들러 설정
        },
        ImageResize: {
          modules: ['Resize']
        }
      }
    }),
    []
  );

  const formats = [
    'header',
    'bold',
    'italic',
    'underline',
    'strike',
    'video',
    'image',
    'color',
    'background',
    'height',
    'width'
  ];
return (<QuillEditor
            ref={quillRef}
            value={content}
            onChange={setContent}
            modules={modules}
            formats={formats}
            theme="snow"
            placeholder="내용을 입력해주세요"
          />)



}

이렇게 된다. 이때도 작동은 잘된다. 하지만 

이런 워닝을 볼 수가 있는데 포맷이 겹쳤다는 워닝 같았다. 

 

그래서 처음엔 설치했던 안쓰는 라이브러리를 다 삭제를 했다. 당연히도 딱히 소용이 없었다. 

 

구글링을 하다보니 Quill 편집기에 사용자 지정 모듈을 등록하는 것을 위치를 옮겨야한다고 했다. 그래서 옮겨 보았다. 

 

와! 해결이 되었다. 알고보니 컴포넌트 내부에서 모듈을 등록했을 경우에 기존에 있는 모듈이 중복되면 오류가 나타나는 것이었고 그래서 전역에 등록을 할 경우 오류가 나지 않는 것이었다.

 

포인트

1. 컴포넌트 외부에서 모듈 등록하기

2. format에 height, width 추가하기

 

정도! 

 

라이브러리를 여러개를 설치하고 해보느라 시간이 조금 많이 걸렸다. 방법은 이리도 쉬운데!! 

import ReactQuill, { 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);
const Quill : React=()=>{
const modules = useMemo(
    () => ({
      imageActions: {},
      imageFormats: {},
      // 툴바 설정
      toolbar: {
        container: [
          [{ header: [1, 2, 3, 4, 5, 6, false] }], // header 설정
          ['bold', 'italic', 'underline', 'strike'], // 굵기, 기울기, 밑줄 등 부가 tool 설정
          ['image', 'video'], // 링크, 이미지, 비디오 업로드 설정
          [{ color: [] }, { background: [] }] // 정렬, 글자 색, 글자 배경색 설정
          // ["clean"], // toolbar 설정 초기화 설정
        ],

        // 핸들러 설정
        handlers: {
          image: imageHandler // 이미지 tool 사용에 대한 핸들러 설정
        },
        ImageResize: {
          modules: ['Resize']
        }
      }
    }),
    []
  );

  const formats = [
    'header',
    'bold',
    'italic',
    'underline',
    'strike',
    'video',
    'image',
    'color',
    'background',
    'height',
    'width'
  ];
return (<QuillEditor
            ref={quillRef}
            value={content}
            onChange={setContent}
            modules={modules}
            formats={formats}
            theme="snow"
            placeholder="내용을 입력해주세요"
          />)



}

 

 

목표 달성여부

• 이미지 리사이즈

내일 목표

• 커뮤니티 게시물 수정 및 삭제