ReactQuill은 React 기반의 WYSIWYG(What You See Is What You Get) 텍스트 에디터 라이브러리입니다. 사용자가 텍스트를 입력하면서 글꼴, 스타일, 목록, 이미지 삽입 등을 실시간으로 편집할 수 있게 해주는 도구입니다.
이 라이브러리는 Quill.js라는 JavaScript WYSIWYG 에디터를 React에서 쉽게 사용할 수 있도록 한번 감싸서 만든 API라고 생각하시면 됩니다.
즉, Quill 라이브러리를 React에서 사용할 수 있도록 만든 모듈인데요, 이를 통해 React 애플리케이션에서 텍스트 에디터를 구현하고 원하는 대로 커스터마이징하여 사용하면 됩니다.
잠깐 써보니, ReactQuill은 웹 애플리케이션에서 텍스트 편집이 필요한 경우에 유용하게 활용될 뿐만 아니라, 블로그 게시물 작성, 이메일 작성기, 콘텐츠 관리 시스템(CMS), 댓글 시스템 등 다양한 용도로 사용이 가능할 것으로 보였습니다.
개인적으로 블로그을 좀 편리하게 해볼까 고민하며 React quill 사용법을 정리해 보았습니다.
※ 아래의 코드들은 간단히 Material UI(with Vite build)와 함께 적용한 코드입니다.
React-quill 설치하기
React-qull은 npm을 통해 설치할 수 있습니다.
npm install react-quill --save
React-quill 및 quill.snow.css 임포트
react-quill의 스타일링을 위해 아래의 CSS를 사용하고자 하는 JSX 혹은 TSX 파일에 임포트해줍니다.
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
React-quill 기본 구조 호출
react-quill에서 입력되고 사용될 텍스트 state 및 handleChange function을 선언한 후, ReactQuill과 연결시켜 줍니다.
const ReactQuillTemplate = (props) => {
const [quillValue, setQuillValue] = useState("");
const handleQuillChange = (content, delta, source, editor) => {
setQuillValue(editor.getContents());
};
return (
<>
<Box>
<ReactQuill
style={{ height: "600px" }}
theme="snow"
modules={modules}
formats={formats}
value={quillValue || ""}
onChange={handleQuillChange}
/>
</Box>
</>
);
};
기본 형태로 구현하여 호출하면 아래에서 설명할 theme snow 정도만 적요하면, 다음과 같이 보이게 됩니다.
테마 theme 지정
무난한 스타일의 theme인 “snow” 를 지정합니다.
<ReactQuill
...
theme="snow"
...
onChange={handleQuillChange}
/>
그 외에도 bubble 이 있는데, 그냥 snow를 쓰는게 무난 할 것으로 보입니다.
※ react-quill이 아닌 원래 qull 모듈에는 core theme도 있다고 봤는데, 리액트용에서는 해당 설정이 정상적으로 동작하지 않은 듯 합니다.
module toolbar 설정
module은 React Quill의 기능을 특정한 방식으로 확장하거나 조정하는 데 사용됩니다.
예를 들어, 이미지 업로드, 링크 삽입, 콘텐츠 저장 및 불러오기와 같은 작업을 수행하기 위해 모듈을 활용할 수 있습니다.
toolbar 설정 내용이 명시적이라 코드를 보면 어떤 기능을 하는지 바로 알 수 있습니다.
const modules = {
toolbar: [
[{ header: [1, 2, false] }],
["bold", "italic", "underline", "strike", "blockquote"],
[
{ list: "ordered" },
{ list: "bullet" },
{ indent: "-1" },
{ indent: "+1" },
],
["link", "image"],
[{ align: [] }, { color: [] }, { background: [] }], // dropdown with defaults from theme
["clean"],
],
};
...
<ReactQuill
....
modules={modules}
...
/>
format 설정
“Format”는 React Quill에서 사용 가능한 텍스트 스타일(글꼴, 크기, 색상 등)을 지정하는 데 사용됩니다.
이러한 스타일을 적용하려면 Quill 컴포넌트에 원하는 서식을 지정하는 “formats” 속성을 전달해야 합니다.
const formats = [
"header",
"bold",
"italic",
"underline",
"strike",
"blockquote",
"list",
"bullet",
"indent",
"link",
"image",
"align",
"color",
"background",
];
...
<ReactQuill
...
formats={formats}
...
/>
module toolbar 와 format의 차이
module의 toolbar 설정은 해당 기능이 toolbar에 표현이 되냐 안되냐를 설정하는 것이고, format은 실제 기능이 동작함을 설정하는 것입니다.
즉, 아래와 같이 module toolbar에 bold 등 글자 스타일링을 적용한 경우 툴바에는 표현하지만, formats 에서 제외(주석처리)했기 때문에 해당 기능을 눌러도 동작하지 않습니다.
const modules = {
toolbar: [
...
["bold", "italic", "underline", "strike", "blockquote"],
...
],
};
const formats = [
"header",
// "bold",
// "italic",
// "underline",
// "strike",
"blockquote",
"list",
"bullet",
"indent",
"link",
"image",
"align",
"color",
"background",
];
즉, 아래의 이미지의 하일라이트된 기능은 format에서 제외했기 때문에 메뉴 툴바에는 보이지만, 눌러도 동작하지 않습니다.
React-Quill 스타일링
상단 DIV에 다음과 같이 react quill class를 잡아 스타일링 할 수 있습니다.
아래의 코드는 에디터창에 Box shadow 을 넣어주고 Height, Width 등을 지정한 코드입니다.
<Box
sx={{
" .ql-editor": {
padding: "30px",
boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.5)",
margin: "2px",
width: "100%",
maxHeight: "75vh",
minHeight: "75vh",
backgroundColor: "white",
},
" .ql-container.ql-snow": {
border: "none",
display: "flex",
justifyContent: "center",
},
}}
>
<ReactQuill
...
/>
</Box>
아래와 같이 높이, 너비, 박스 쉐도우 등이 설정됩니다.
아래의 경우는 backgroundColor 를 “#CDA752″로 변경한 코드입니다.
이상으로 React-quill 컴포넌트에 대해서 알아보았습니다.
좀 더 자세한 사항은 React qull 혹은 quill 깃허브 사이트 등에서 확인할 수 있습니다.
리액트에서 에디터 구현시 도움 되시길 바랍니다.
그 밖에 도움되는 글
react-pro-sidebar 사용법 예시 정리(2023)
ERESOLVE 의존성 충돌 unable to resolve dependency tree 해결 방법