웹에디터 비교

React-Quill VS react-draft-wysiwyg

이번에 새롭게 시작한 프로젝트에서 웹 에디터를 사용해야 할 일이 생겨서 두 개의 라이브러리를 직접 사용해 본 후기를 작성하겠습니다.

react_quill.tsx

import { useState } from "react";
import dynamic from "next/dynamic";

const QuillNoSSRWrapper = dynamic(() => import("react-quill"), {
  ssr: false,
});

export default function Home() {
  const [value, setValue] = useState(""); // Define and initialize 'value' state

  const modules = {
    toolbar: [
      [{ header: "1" }, { header: "2" }, { font: [] }],
      [{ size: [] }],
      ["bold", "italic", "underline", "strike", "blockquote", "code-block"],
      [{ color: [] }, { background: [] }],
      [
        { list: "ordered" },
        { list: "bullet" },
        { indent: "-1" },
        { indent: "+1" },
      ],
      [{ align: [] }],
      ["link", "image", "video"],
      //["clean"],
    ],
    clipboard: {
      // toggle to add extra line breaks when pasting HTML:
      matchVisual: false,
    },
  };

  /*
   * Quill editor formats
   * See https://quilljs.com/docs/formats/
   */
  const formats = [
    "header",
    "font",
    "size",
    "bold",
    "italic",
    "underline",
    "strike",
    "blockquote",
    "code-block",
    "color",
    "direction",
    "align",
    "list",
    "bullet",
    "indent",
    "link",
    "image",
    "video",
  ];

  return (
    <div>
      <QuillNoSSRWrapper
        modules={modules}
        formats={formats}
        placeholder="여러분의 경험을 자유롭게 적어주세요."
        className="h-[1000px] outline-none"
        theme="snow"
        value={value}
        onChange={setValue}
      />
      <div>{value}</div>
      <div dangerouslySetInnerHTML={{ __html: value }} />
      {/* Display the 'value' state */}
    </div>
  );
}

위의 코드가 React-Quill 라이브러리를 사용해서 작성한 에디터 코드이고, 나는 현재 next.js, typescript를 사용하고 있기 때문에 실행하였을 때 오류가 나지 않으려면

const QuillNoSSRWrapper = dynamic(() => import("react-quill"), {
  ssr: false,
});

이 코드를 추가해야한다. 위의 코드는 "react-draft-wysiwyg" 라이브러리를 사용했을 때도 똑같이 적용됐던 코드이다.

Quill 컴포넌트에 modules와 format를 적용하면 헤더, 폰트, 링크, 이미지, 비디오 등 기능이 추가된 것을 볼 수 있다.
어떤 기능들이 있는지는 React-Quill 공식문서를 확인하면 정리가 잘 되어 있다.
React-Quill 공식문서

React-Quill 에디터에는 2가지 테마가 있는데 snow 테마는 에디터가 화면에 노출되어 있는 형태이고, bubble 테마는 에디터가 화면에 노출되지 않고 텍스트를 드래그하면 나오는 형태였다.

나는 에디터가 화면에 노출되어 있는 형태를 사용해야 해서 snow 테마를 사용하였는데 border가 자동으로 적용되서

<div>
      <QuillNoSSRWrapper
        modules={modules}
        formats={formats}
        placeholder="여러분의 경험을 자유롭게 적어주세요."
        className="h-[1000px] outline-none"
        theme="snow"
        value={value}
        onChange={setValue}
      />
      <div>{value}</div>
      <div dangerouslySetInnerHTML={{ __html: value }} />
      {/* Display the 'value' state */}
    </div>

이 코드에서 className에 "h-[1000px] outline-none" 이 코드를 적용했는데 h-[1000px]는 적용이 잘 되었지만 border나 outline 에 대한 코드를 적용되지 않았다.
그 이유는 "import "react-quill/dist/quill.snow.css";" 이 코드를 _app.tsx 파일에 적용해서인데 일단 snow 테마를 사용하려면 이 코드를 무조건 적용해야하고 이 코드를 적용하면 템플릿이 적용되어 className 에 들어가있는 style이 적용이 되지 않는 것이였다.
따라서 따로 css 파일을 생성하여 스타일 관리를 해주어야 했다.

textEditor.css

.ql-toolbar.ql-snow {
  border: none;
}

.ql-container.ql-snow {
  border: none;
}

이 파일을 만든 뒤 _app.tsx 에 import 시키면 경계선이 사라지게 된다.
이러한 사실을 몰랐어서 구글링과 공식문서를 뒤지다가 겨우 해결할 수 있었다.

React_Quill 라이브러리 장단점

• 장점 : 공식문서 정리가 잘 되어있고, 확실히 서치 했을때 많은 자료들이 나온다. 기능들을 추가하기 간편하고, 깔끔하게 모든 기능들이 바로 적용된다. css 스타일 또한 디자인이 굉장히 깔끔하고 우수하다.
• 단점 : 이미지 업로드 시 따로 처리해주어야 하는 코드가 필요하고, 이미지 사이즈를 조절하는 코드도 따로 추가해주어야 한다. 또한 css파일을 import 하므로써 이미 적용되어 있는 style이 있어 구조를 바꾸려면 따로 css 파일을 만들어 추가해주어야 한다. (이 부분은 확실하진 않으나 나는 따로 css파일을 만들어 해결할 수 있었다.)

코드를 실행하였을 때 적용된 화면