[React | Next.js] TOAST UI Editor 사용하기

설치 및 적용

TOAST UI :: Make Your Web Delicious!

간단한 오픈소스 글쓰기 에디터를 찾아보다가 현재 TUI를 사용하고 있다.

Docs에 나와있는대로 잘 설치하고 따라해보면 기본 에디터가 잘 나오는 걸 볼 수 있음.

 

<Editor
  placeholder="입력해 주세요."
  previewStyle="vertical"
  height="600px"
  initialEditType="wysiwyg"
  usageStatistics={false}
  ref={editorRef}
  // plugins={[colorSyntax, tableMergedCell]}
/>​

기본 Editor를 import 한 후 위와 같이 사용하고 있다.

 

하지만 왜인지 plugins는 문서에서 하란대로 적용하는데 계속 알 수 없는 에러가 떠서 적용하지 못하고 있다.ㅠ_ㅠ

아래는 구글링 하다 찾은 같은 에러... 하지만 해답은 아직 찾지 못했다

Use the plugin'@toast-ui/editor-plugin-color-syntax' to report an error - Nhn/Tui.Editor

 

본문 작성 내용 저장하기

editorRef.current.getInstance().getHTML()

React에서는 editor에다가 Ref를 달아준 후에 getInstance().getHtml()로 작성한 내용을 받아올 수 있다.

-> 버전 업그레이드 후 .getHTML()로 바뀌었다.

console로 찍어보면 <p>태그에 감싸져서 나오는 모습을 볼 수 있음. 이 내용을 DB에 저장해놓으면 불러올 수도 있다.

 

저장된 내용 불러오기

editorRef.current.getInstance().setHTML(response.data.content);

-> 이것 역시 setHTML로 사용.

 

getHTML()으로 확인되었던 html이 response.data.content에 저장되어있고,

getInstance().setHTML()에서 저장된 html을 형식에 맞게 세팅해준다.

 

Next.js에서 TUI

Next.js를 쓰는 이유는 SSR인데, toast Editor는 브라우저에서만 작동되고 SSR를 지원하지 않아서

이대로 빌드하면 window is not define이라는 에러가 발생한다.

 

이 문제는 dynamic import를 통해 해결할 수 있다.

import React from "react";
import dynamic from "next/dynamic";

const Write = dynamic(
  () => import("components/article/Write"),
  { ssr: false }
);

const write: React.FC = () => {
  return <Write />;
};

export default write;

Editor가 적용된 Component가 사용되는 곳에 dynamic 코드를 입력해준다.