React-quill을 활용한 구현 예제

참조블로그 : https://velog.io/@onezerokang/Quill%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%97%90%EB%94%94%ED%84%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0-Quickstart1

Quill을 사용해서 텍스트 에디터 만들기: Quickstart(#1)

맨땅에 헤딩으로 공식문서와 chat gpt를 갖고 씨름하던 나에게,,, 한 줄기... 아니 그냥 햇살과 같이 비춰주신 블로그...ㅠㅠ

위 블로그에서 대부분의 내용이 설명이 되어 있었고, 이를 참조하여 내가 원하는 기능을 구현하고자 한다.

 

Quill을 활용하여 구현하고자 하는 예제:

 

Module을 활성화해서 편집가능한 상태로 만들기

Quill.js에서 제공하는 기본 컴포넌트만으로도 충분히 "작동하는" 에디터를 만들 수 있다.

하지만 앞선 포스팅에서 이야기 한 5가지 기능을 추가하는 것은 일종의 에디터 커스터마이징 영역에 해당한다.

따라서 에디터를 커스터마이징 하기 위해 modules 속성을 React-Quill에 전달하여 Quill.js의 에디터 모듈 기능을 사용할 수 있도록 해야 한다.

 

이 때, 2가지 작업이 이뤄져야 하는데,,, 

1. 클래스형 컴포넌트 -> 함수형 컴포넌트로 전환하기 : 공식문서에는 클래스형 컴포넌트만을 예시로 들고, 있는데 이를 함수형 컴포넌트로 전환해서 사용할 수 있어야 한다. why? 우리 프로젝트에서는 99% 함수형 컴포넌트로 이뤄진 코드를 다룰 것이기 때문에!
2. Format에서 내가 원하는 기능이 있는지 살펴보고 module과 format을 활성화해서 기능 구현하기!
: 아주 간단하게, 모듈은 해당 기능이 코드 단에서 실행되는 것을 말하고 format은 유저에게 보이는 앞단으로 이해했다.

 

Quill에서 지원하고 있는 포맷의 종류

Inline	Block	Embeds
Background Color - background Bold - bold Color - color Font - font Inline Code - code Italic - italic Link - link Size - size Strikethrough - strike Superscript/Subscript - script Underline - underline	Blockquote - blockquote Header - header Indent - indent List - list Text Alignment - align Text Direction - direction Code Block - code-block	Formula - formula (requires KaTex) Image - image Video - video

 

Module을 활성화 (Class형 컴포넌트를 Func형 컴포넌트로 전환)

var quill = new Quill('#editor', {  // #editor는 HTML 문서에서 해당 텍스트 편집기를 가리키는 DOM 요소의 ID
  modules: {			// Module 활성화
    'history': {          	// 'history' 모듈은 사용자의 작업 이력을 관리
      'delay': 2500,		// 사용자 작업이력 관리
      'userOnly': true		// 사용자 작업이력 관리
    },
    'syntax': true        // 'syntax' 모듈은 문법 강조 기능을 활성화
  }
});

위의 코드는 공식문서에서 제공하는 모듈확장 시 사용되는 모듈의 코드이다.

이를 함수형 컴포넌트에서 사용하기 위해 리팩토링한 코드는 다음과 같다. (*Chat GPT 사랑해...)

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

function MyEditor() {
  const [editorHtml, setEditorHtml] = useState(''); // 텍스트 편집기의 내용 관리
  
  function handleChange(html) { // html 인자는 텍스트 편집기 내용을 HTML 형식의 문자열로 나타냄
    setEditorHtml(html); // ReactQuill 컴포넌트가 기본적으로 HTML 형식의 문자열을 사용하기 때문
  }
  
  return (
    <ReactQuill
      value={editorHtml}
      onChange={handleChange}
    />
  );
}

export default MyEditor;

 

Toolbar Module을 사용한 에디터 커스터마이징

위의 예제에서는 history 모듈과 syntax 모듈을 사용했지만, 나는 일단 toolbar를 중심으로 구현해야 하기 때문에, toolbar 모듈을 중심으로 구현해야 한다. *공식문서에서 제공하는 기본 class형 예제를 제외하고 바로 함수형 예제로 바꿨다.

const modules = {
  toolbar: [ // 툴바 그룹
    [{ header: [1, 2, false] }], // 헤더 그룹 내부에 각각의 요소는 곧 버튼과 기능을 의미
    ['bold', 'italic', 'underline', 'strike', 'blockquote'], // 스타일 그룹
    [
      { list: 'ordered' },
      { list: 'bullet' },
      { indent: '-1' }, // 내어쓰기
      { indent: '+1' }, // 들여쓰기
    ],
    ['link', 'image'],
    [{ color: [] }, { background: [] }], // 폰트색상, 화면색상
    [{ font: [] }], // 폰트스타일
    [{ align: [] }], // 정렬
    [{ script: 'sub' }, { script: 'super' }], // 첨자
    ['code', 'code-block'], // 코드 블록 및 인라인 코드를 위한 기능 추가
    ['clean'], // 지우기
  ],
};

이후 Format에서 제공하는 포맷들을 가져와 파일에 제공해준다.

const formats = [
  'header',
  'bold',
  'italic',
  'underline',
  'strike',
  'blockquote',
  'list',
  'bullet',
  'indent',
  'link',
  'image',
  'color',
  'background',
  'font',
  'align',
  'script',
  'code',
  'code-block', // 코드 블록 및 인라인 코드를 위한 포맷 추가
];

이렇게 되면 일단 다음과 같은 화면으로 구현된다.

다음 포스팅 : https://whaleinmilktea.tistory.com/87

Quill 기본개념 포스팅 : https://whaleinmilktea.tistory.com/79

(Rich-TextEditor) React-quill