[react, web] 리액트로 글 작성 페이지 개발 시, 'ReactQuill' 의 유용성

- 현재 개발 중인 블로그의 글쓰기 페이지입니다.

 

<Form.Group controlId="formContent">
            <ReactQuill
              value={content}
              onChange={handleContentChange}
              modules={{
                toolbar: [
                  [{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
                  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                  ['bold', 'italic', 'underline'],
                  [{ 'color': [] }, { 'background': [] }],
                  [{ 'align': [] }],
                  ['link', 'image'],
                  ['clean']
                ],
              }}
              formats={[
                'header', 'font', 'list', 'bullet',
                'bold', 'italic', 'underline',
                'color', 'background',
                'align', 'link', 'image'
              ]}
              className="form-control textarea"
            />
          </Form.Group>

위의 코드를 통해, 특정부분의 폰트만 크게/작게, 두껍게/얇게 할 수 있습니다.

또한, 중간 중간 사진도 첨부할 수 있습니다.

 

1. 설치

npm install react-quill
npm install quill

 

2. 사용하려는 페이지에 import 문 추가

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';