react-quill editor 연동 (커스텀)

프로젝트에서 게시판을 구현해야할 일이 생겼다. 게시글을 등록하는 부분에 react-quill 라이브러리를 사용해 커스텀하기로 했다.

위 사진처럼 기능은 글 작성과 이미지를 추가할 수만 있으면 됐다.

그리고 이게 기본적인 스타일이다.
기존 코드에서 스타일은 styled-component를 사용했는데 아무래도 라이브러리다 보니 스타일을 다르게 적용해야했다.
기존 css처럼 스타일을 변경해야했는데, 스타일 변경방식은 간단했지만 내가 원하는대로 정확하게 구현하려면 각 요소가 어떤 class명을 갖고있는지 알아야했고 이는 개발자도구로 쉽게 확인이 가능하다.

---

아래처럼 기본 스타일을 위해 snow 테마 스타일을 import하고,
따로 내가 커스텀할 css 파일또한 연결해준다.

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

.quill > .ql-toolbar.ql-snow { //toolbar 스타일 변경
    스타일 적용
}

.quill { //quill 전체
    스타일 적용
}

.ql-container.ql-snow { //내용입력칸 스타일 변경
    스타일 적용
}

이런 식으로 스타일 변경을 적용해주면 된다.

그리고 기존 toolbar에서 아이콘의 사진을 변경하고 싶으면 아래처럼 해주면된다.
(이미지 아이콘을 변경하는 상황)

const svgIcon = `<img src="${imgSvg}" alt="이미지" />이미지 추가`;
    var icons = ReactQuill.Quill.import('ui/icons');
    icons['image'] = svgIcon; // 이 이미지로 변경됨

    const toolbarOptions = [['image']]; // 이미지 기능만 필요

    const modules = {
        toolbar: {
            container: toolbarOptions,
        },
    };