React-Quill 써보기

리액트 프로젝트에서 텍스트 에디터로 react-quill을 써보았다

https://www.npmjs.com/package/react-quill

react-quill

 

일단 설치를 한다

npm install react-quill

 

그리고 import후 바로 불러서 사용하면 된다!

import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';

export default function Example() {
  const [contents, setContents] = useState("");
  
  return (
    <ReactQuill
    theme="snow"
    placeholder="내용을 작성하세요"
    value={contents}
    onChange={(e) => setContents(e)}
  />
  );
}

 

툴바에서 사용하고 싶은 옵션들은 modules에 추가해 줄 수 있다

export const getQuillModule = {
  toolbar: [
    ['image', 'link', 'video'],
    ['bold', 'italic', 'underline', 'strike'],
    ['formula', 'clean'],
    ['blockquote', 'code-block'],
    [{ size: ['small', false, 'large', 'huge'] }],
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ font: [] }],
    [{ color: [] }, { background: [] }],
    [{ align: [] }],
    [{ direction: 'rtl' }],
  ]
};



<ReactQuill
	theme="snow"
	placeholder="내용을 작성하세요"
	modules={getQuillModule}
	value={contents}
	onChange={(e) => setContents(e)}
/>

 

글 작성도 잘 되고 이미지도 잘 들어가지만 이미지 크기 조절은 안된다

이미지 크기조절을 위해서는 quill-image-resize도 추가해주어야한다

https://www.npmjs.com/package/quill-image-resize

quill-image-resize

 

일단 설치

npm install quill-image-resize

 

그리고 추가해 주기

import ImageResize from 'quill-image-resize';
import { getQuillModule } from 'config/quillModule';
Quill.register('modules/ImageResize', ImageResize);

 

모듈에 원하는 옵션도 넣어주기

export const getQuillModule = {
  toolbar: [
   ...
  ],
  ImageResize: {
    displayStyles: {
      backgroundColor: 'black',
      border: 'none',
      color: 'white',
    },
    modules: ['Resize', 'DisplaySize', 'Toolbar'],
  },
};

 

그리고 나면 이미지 크기 조절도 잘 된다!