[React] React Quill 에디터 라이브러리 사용 1(feat.react-quill-new)

🔔 [관련 정리 리스트]

• React Quill 2-이미지처리(편집중/참고만)
• React Quill 3-이미지처리(편집완료/사용)
• React Quill 4-이미지 리사이즈

---

*react-quill이 상단, react-quill-new이 하단에 정리되어 있음

 

[react-quill]

GitHub - zenoamaro/react-quill: A Quill component for React.

 

설치 및 사용법

설치

npm install react-quill

 

index.html 에 아래 코드 추가

<link
  rel="stylesheet"
  href="https://unpkg.com/react-quill@1.3.3/dist/quill.snow.css"
/>

 

사용하기

import React, { useState } from 'react';
import ReactQuill from 'react-quill'; //import해오기1
import 'react-quill/dist/quill.snow.css'; //import해오기2

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

  return <ReactQuill theme="snow" value={value} onChange={setValue} />; {/*value, onChange props로 전달하기*/}
}

 

---

활용하기 

1. 에디터 컴포넌트 생성

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

interface ReactQuillEditorProps {
  style?: any;
  value?: string;
  onChange: (value: string) => void;
}

function ReactQuillEditor({ style, value, onChange }: ReactQuillEditorProps) {
  const modules = {
    toolbar: {
      container: [['image'], [{ header: [1, 2, 3, 4, 5, false] }], ['bold', 'underline']]
    }
  };
  return (
    <>
      <ReactQuill style={style} modules={modules} value={value} onChange={onChange} />
    </>
  );
}
export default ReactQuillEditor;

2. 에디터 컴포넌트 사용

const [content, setContent] = useState('');

const handleEditorChange = (value: string) => {
  setContent(value); // 상태 업데이트
};

...
<ReactQuillEditor
  value={content}
  onChange={handleEditorChange} {/*setContent대신 함수도 전달 가능*/}
  style={{ width: '100%', height: '80%' }}
/>

툴바설정 참고) https://quilljs.com/docs/modules/toolbar/

Quill - Your powerful rich text editor

 

결과 화면

---

✔ [react-quill-new] 

react-quill-new

 

위에 정리했던 react-quill 라이브러리를 사용했더니 아래 Error들이 떴다.

react-quill.js?v=d23b9689:5562 [Deprecation] Listener added for a 'DOMNodeInserted' mutation event. Support for this event type has been removed, and this event will no longer be fired. See https://chromestatus.com/feature/5083947249172480 for more information. >> react-quill.js에서 'DOMNodeInserted' 변이 이벤트에 대해 리스너 관련 에러. 이벤트에 대한 지원이 제거되었는데 사용하여 에러가 났다.

ng: finddomnode is deprecated and will be removed in the next major release. instead, add a ref directly to the element you want to reference. learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node error component stack >> React에서 더 이상 findDOMNode를 사용하지 말라는 안내. findDOMNode는 React에서 특정 DOM 노드를 참조할 때 사용되었으나, 최신 React 버전에서는 폐기 예정이며 다음 주요 릴리스에서 완전히 제거될 예정이다.

 

따라서 react-quill → react-quill-new 라이브러리로 사용하던 걸 변경했다.

더 최신이면서 위 에러들이 해결된 버전이다.

 

설치

npm install react-quill-new

(참고: index.html 에 아래 적용해두었던건 지웠음)

<link rel="stylesheet" href="https://unpkg.com/react-quill@1.3.3/dist/quill.snow.css" />

 

사용

 import만 ReactQuill과 다르고 나머지 사용은 똑같이 해주면 된다.

import React, { useState } from 'react';
import ReactQuill from 'react-quill-new'; //import1
import 'react-quill-new/dist/quill.snow.css'; //import2

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

  return <ReactQuill theme="snow" value={value} onChange={setValue} />; {/*value, onChange props로 전달하기*/}
}

 

---

참고사이트

React-Quill 사용하기(1)

Next.js 프로젝트에 React-Quill(텍스트 에디터) 적용하기

React-Quill를 사용하여 게시글 에디터 구현하기