텍스트 에디터 Quill.js 사용하기(with React)

웹브라우저에서 에디터를 쉽게 불러올 수 있는 도구로 자바스크립트 라이브러리 Quill.js가 있다. 리액트 프로젝트에선 React-Quill이라는 Quill.js를 React 컴포넌트로 랩핑한 라이브러리를 많이 쓰긴 하지만, 세밀한 제어와 커스터마이징을 하기에는 Quill.js가 좀 더 유리해 보여 해당 라이브러리를 사용하게 되었다.

1. Quill.js 설치하기

$ npm install quill

2. Quill.js를 불러와서 Editor 컴포넌트를 만들어 준다.

이때 Quill의 기본 테마를 적용해주기 위해 snow.css도 import해준다.

import Quill from 'quill';
import 'quill/dist/quill.snow.css';
import { useEffect, useRef } from 'react';

const Editor = ({ onChange, value }) => {
  const editorRef = useRef(null);


  return (
    <div>
      <div ref={editorRef}></div>
    </div>
  );
};

export default Editor;

ref={editorRef} 이 ref는 리액트에서 Dom요소나 컴포넌트 인스턴스를 참조하기 위해 사용하는 ref 속성이다. 이 ref를 사용하면 컴포넌트가 렌더링된 후 해당 Dom 요소나 인스턴스에 직접 접근해 조작할 수 있다.(current속성을 통해 접근)

3. 이제 Quill 에디터를 생성할 것이다.

import Quill from 'quill';
import 'quill/dist/quill.snow.css';
import { useEffect, useRef } from 'react';

const Editor = ({ onChange, value }) => {
  const editorRef = useRef(null);

useEffect(() => {
  if (editorRef.current) {
    const quill = new Quill(editorRef.current, {
      theme: 'snow',
      modules: {
        toolbar: [
          [{ 'header': '1' }, { 'header': '2' }],
          ['bold', 'italic', 'underline'],
          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
          [{ 'script': 'sub'}, { 'script': 'super' }],
          [{ 'indent': '-1'}, { 'indent': '+1' }],
          [{ 'size': ['small', 'medium', 'large', 'huge'] }],
          [{ 'color': [] }, { 'background': [] }],
          [{ 'font': [] }],
          [{ 'align': [] }],
          ['link', 'image']
        ]
      }
    });
  }
}, []);

  return (
    <div>
      <div ref={editorRef}></div>
    </div>
  );
};

export default Editor;

useEffect를 사용해 처음 렌더링될때 Quill 에디터를 초기화하고 설정해주었다.

if (editorRef.current) editorRef.current가 null이 아니라 실제 Dom요소를 가르킬때 실행하도록 조건 설정
new Quill(editorRef.curren... new Quill을 호출하여 에디터 생성
theme: 'snow', snow 테마 설정
toolbar 원하는 속성들을 넣으면 된다
modules: { toolbar: [...] }: 에디터의 모듈을 설정, 툴바 구성 요소 설정

이렇게 하면 아주 기본적인 텍스트 에디터가 완성된다!😄

🚀 다음글에선 이 Quill의 modules를 사용해 에디터 안에 GIF를 넣을 수 있는 커스텀 에디터를 작업할 것이다.