(Rich-TextEditor) React-quill

 

Rich Text-Editor & WisWig

Rich Text-Editor(리치 텍스트 에디터)와 WisWig(위즈윅) 에디터는 흔히 블로그나 웹 문서를 작성할 때 흔히 볼 수 있는 위와 같은 에디터를 말한다. 통상적으로 비슷한 의미로 쓰이지만 다음과 같은 차이점을 갖는다.

리치 텍스트 에디터는 일반적으로 HTML 코드를 직접 작성하는 것이 아니라, 일반적인 텍스트 에디터와 비슷한 방식으로 작동한다.
사용자는 문서의 스타일, 글꼴, 크기 등을 선택하거나, 강조, 들여쓰기, 링크 등의 일반적인 기능을 수행할 수 있지만, 사용자가 작성한 문서는 HTML 코드로 저장된다.

반면에 위지윅 에디터는 "What You See Is What You Get"의 약자로, 사용자가 작성한 문서가 실제로 출력될 모습과 비슷하게 표시된다. 즉, 사용자가 작성한 문서에 대한 실제 미리보기를 제공한다.
사용자는 텍스트를 작성하고, 그림이나 표를 삽입하고, 스타일을 변경하고, 강조 등의 작업을 수행할 수 있으며, 이러한 작업은 사용자가 직접 HTML 코드를 작성할 필요가 없이 마우스로 클릭하거나 드래그하여 수행할 수 있게 된다.

 

프로젝트를 앞두고 미리 텍스트 에디터를 구현해서 데이터가 어떻게 출력되는지 확인하는 과정이 필요하다고 생각되었다.

이는, 일반적인 객체타입과 달리 작성자가 어떻게 작성하느냐에 따라 각기 다른 데이터로 전달될 것이라고 추측했기 때문이다.

 

일단, 학습곡선이 가장 낮다고 하는 react-quill을 활용해서 위의 에디터를 구현해보고자 한다.

사실, react-quill은 학습곡선은 낮지만 그만큼 확장성이 부족하다. 즉, 전문가 그룹으로 갈수록 활용할 수 있는 여지가 적다는 것이다.

 

그렇지만 본인은 현재 에디터 구현을 처음 접하는 입장 + 에디터 말고도 구현을 테스트해봐야 할 수많은 프로젝트 구현요소 + 처음으로 부트캠프에서 제공하는 라이브러리 외의 라이브러리를 찾는 입장을 고려하여 가장 효율적인 툴을 선택하기로 했다.

 

현재 npm trends에서 찾아본 인기있는 에디터 순위는 다음과 같다.

 

이제 구현해보자!

일단 설치부터 해보고 보자!

npm install react-quill --save

그리고, 열심히 구글링을 해보니 기본적으로 제공하는 snow 테마가 심플하고 깔끔하다고 하기에 그 또한 추가해서 기본 코드를 작성했다.

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

function Editor() {
  const [value, setValue] = useState('');

  return <ReactQuill theme="snow" value={value} onChange={setValue} />;
}

export default Editor;

먼저, 위즈윅 에디터는 상단의 toolbox와 하단의 preview 부분으로 구성되어있다.

사용자가 해당 툴을 선택하고 작성하면 이에 맞춰 html 코드로 변환되어 보여진다.

 

현재 react-quill의 기본 컴포넌트에서 제공하는 요소들은 다음과 같다.

따라서, Quill의 확장프로그램과 없는 부분은 스스로 코드를 작성(제발 다 있기를..)해서 구현해야 할 내용은 다음과 같다.

1. 코드 블럭 (code)
2. 인라인 코드 (inline)
3. 표 삽입 (table)
4. 인용 (quote)
5. 이미지 삽입 (img)

... 이외에도 태그/스포일러 등의 툴도 있지만 일단, 다음의 5가지 기능구현을 핵심으로 잡고, 위에서부터 우선순위를 잡아서 시간 내에서 가능한 선까지 구현해보고자 한다.

 

React-Quill 기본 문법 및 구조

일단, react-quill은 뭘까? react-quill의 공식문서가 적힌 페이지를 찾으려고 따라가보면 공식문서를 찾기가 힘들다.

오히려 Quill.js라고 검색하면 바로 공식 홈페이지가 등장한다.

 

React-Quill은 이와 같이 Quill.js를 가지고 React에서 사용할 수 있도록 래핑한 툴을 의미한다.

*React 래퍼(Wrapper)란, React 컴포넌트로 래핑(Wrapping)된 외부 라이브러리를 의미한다. 즉, 브라우저 수준에서 동작하는 도구를 객체로 데이터를 받아와 React 프로젝트에서 편집할 수 있도록 만든 것을 말한다.

 

Quill은 기본적으로 브라우저에서 동작하는 JS 기반 라이브러리이기 때문에 React에서 해당 기능을 사용하고자 한다면, 사용하고자 하는 기능을 데이터로 전달받고 해당 기능을 사용하기 위해 포매팅을 해줘야 한다. 따라서 Class를 생성하고 이를 인스턴스로 먼저 만들어줘야 한다.

 

공식문서에서는 사용할 수 있는 기본 기능들이 나열된 API가 제공되고 있으며, 이를 포매팅하기 위한 기본적인 포맷이 제공되고 있다.

CONTENT: 에디터 내용을 조작하는 API
   ===> insertText, deleteText, setContents, getContents, getText 등
FORMATTING: 에디터에서 사용되는 포맷을 제어하는 API
   ===> bold, italic, underline, strike, background, color 등
SELECTION: 에디터 내의 선택 영역을 제어하는 API
   ===> getSelection, setSelection, hasFocus, getBounds 등
EDITOR: 에디터의 전반적인 동작을 제어하는 API를 제공
   ===> enable, disable, focus, blur, scrollIntoView 등이 있습니다.
EVENTS: 에디터에서 발생하는 이벤트를 처리할 수 있는 API를 제공
   ===> on, off, once, trigger 등
MODEL: 에디터 내의 모델을 제어하는 API
   ===> create, getDelta, updateContents, getLength 등
EXTENSION: 에디터의 확장 기능을 구현할 수 있는 API
===> register, addContainer, getModule, import 등

여기까지가 Toolbox에서 사용자가 툴을 선택했을 때 제어하는 내용들이다.

+ 그 외에도 사용자가 단축키를 입력했을 때 등을 제어할 때도 API를 사용한다.

Format:
이러한 포맷들은 에디터에서 사용되는 스타일이나 태그 등을 정의합니다.
   ===> bold, italic, underline, strike, blockquote, list, bullet, indent, link, image, video, code-block 등

Format은 Formatting과 달리, 에디터에서 보이는 포맷을 의미한다.

 

또한 React-quill은 여러 확장 모듈을 지원하고 있다.

이는 공식문서의 modules를 참조하면 좋다.

: https://quilljs.com/docs/modules/toolbar/

Toolbar Module - Quill

 

Quill의 확장

React-quill은 quill이 react에서 사용될 때 익숙한 방법인 <ReactQuill /> 컴포넌트로 사용된다.

위의 API와 Format은 기본 컴포넌트 외에도 추가적인 커스터마이징이 필요할 때 사용되는 개념들이다.

 

이 외에도 react-quill은 highlight.js 등의 확장프로그램으로 quill을 더욱 유용하게 사용할 수 있는 툴을 제공한다.

 

구현2 포스팅 : https://whaleinmilktea.tistory.com/80