[에디터] React Quill 이미지 사이즈 조절 (quill-image-actions)

시작하며...

현재 프로젝트에서 내가 게시물 등록하기 페이지를 맡게 되어 React Quill 라는 에디터 라이브러리를 사용하여 구현하였다.

게시물 등록하기

이미지를 삽입하면 아래처럼 화면에 꽉 차게 된다. 그래서 실제 게시물을 작성하는 페이지처럼 마우스를 사용하여 사진의 크기를 마음대로 조절할 수 있으면 좋을 거 같다고 생각을 했다.

화면에 꽉찬다..

 

 

@xeger/quill-image-actions 사용

React Quill 에서 이미지를 다룰 수 있는 quill-image 라는 모듈을 사용하였다. 해당 모듈을 통해 이미지의 사이즈와 정렬 위치를 조절할 수 있다.

 

https://github.com/xeger/quill-image

GitHub - xeger/quill-image: Delightful editing of rich-text image embeds in the Quill editor.

 

설치

나는 이미지 위치까지는 사용하고 싶진 않아서 이미지의 사이즈를 조절하는 quill-image-actions 을 설치하였다.

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

 

적용

해당 모듈을 import 하고 Quill 에디터에서 해당 모듈을 등록하고 사이즈 조절을 하기 위해 formats 에 'width' 와 'height' 를 추가한다.

import ReactQuill, { UnprivilegedEditor, Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { ImageActions } from '@xeger/quill-image-actions';

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

const formats = [
  // ...(생략)
  'height',
  'width',
];

 

그리고 modules 에 ImageRezise: { modules: ['Resize'] } 를 추가해 준다.

const QuillEditor = ({ content, setContent }: QuillEditorProps) => {
  // 생략

  const modules = useMemo(() => {
    return {
      imageActions: {},
      toolbar: {
        container: [
          ['bold', 'italic', 'underline'],
          [{ align: '' }, { align: 'center' }, { align: 'right' }],
          [{ list: 'bullet' }, { list: 'ordered' }],
          [{ color: [] }, 'image'],
          ['link'],
        ],
        handlers: {
          image: handleClickImage,
        },
        ImageResize: {
          modules: ['Resize'],
        },
      },
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <ReactQuill
      ref={QuillRef}
      placeholder="본문을 입력해주세요"
      theme="snow"
      modules={modules}
      value={content}
      formats={formats}
      onChange={handleQuillChange}
    />
  );
};

export default QuillEditor;

 

결과

해당 모듈이 잘 적용되어서 사진의 사이즈가 마우스 드래그로 조절이 된다!

이미지 조절

 

마치며...

React Quill 라이브러리를 사용하여 실제 에디터처럼 간편하게 구현할 수 있고 다양한 모듈들이 있어 유용하다