TOAST UI Editor는 NHN에서 개발한 텍스트 에디터 라이브러리이다. React에서 사용할 만한 마크다운 혹은 WYSIWYG(What You See Is What You Get) 에디터 중에서는 제일 간단하게 사용할 수 있다고 생각 하였으나 최신 업데이트가 2년 전이며 React 17부터 업데이트를 지원하지 않아 사용에 있어 어려움이 존재한다. 그래도 사용을 해야겠다면 일반 JS를 사용하는 방식으로 사용하여야한다.

만약 react wrapper를 그대로 사용하고자 한다면 의존성 설치에 어려움이 존재하게 된다. 사용하고자 한다면

npm install --force // 충돌 우회
// 혹은
npm install --legacy-peer-deps  // 충돌 무시

로 강제로 다운로드 받아야한다. 하지만 이렇게 사용하면 프로젝트에 의존성이 추가될때 마다 다시 같은 에러가 반복된다는 점이 존재한다. 때문에 react wrapper를 사용하지 않는 것을 추천한다.

React Wrapper 사용하지 않고 사용하기

✅ 1. 설치하기

npm install @toast-ui/editor
npm install @toast-ui/editor-plugin-code-syntax-highlight prismjs

✅ 2. 스타일 파일 불러오기

// App.tsx 혹은 ToastEditor.tsx 상단
import '@toast-ui/editor/dist/toastui-editor.css';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
import 'prismjs/themes/prism.css';

✅ 3. React에서 Editor 직접 사용하기

import { useEffect, useRef } from 'react';
import Editor from '@toast-ui/editor';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
import Prism from 'prismjs';

const ToastEditor = () => {
  const editorRef = useRef<HTMLDivElement | null>(null);
  const editorInstance = useRef<Editor | null>(null);

  useEffect(() => {
    if (editorRef.current && !editorInstance.current) {
      editorInstance.current = new Editor({
        el: editorRef.current,
        height: '500px',
        initialEditType: 'markdown',
        previewStyle: 'vertical',
        placeholder: '내용을 입력해주세요...',
        plugins: [[codeSyntaxHighlight, { highlighter: Prism }]],
      });
    }

    return () => {
      editorInstance.current?.destroy();
    };
  }, []);

  // ✅ 마크다운 값 가져오는 함수
  const handleGetMarkdown = () => {
    const value = editorInstance.current?.getMarkdown();
    console.log(value);
  };

  return (
    <div>
      <div ref={editorRef} />
      <button onClick={handleGetMarkdown}>내용 확인하기</button>
    </div>
  );
};

export default ToastEditor;

✅ 4. 부모 컴포넌트에서 값 전달도 가능

const App = () => {
  return (
    <div>
      <h1>Toast UI Editor 테스트</h1>
      <ToastEditor />
    </div>
  );
};

✅ 5. 자주 쓰는 기능 확장 팁

기능	방법
✅ 초기값 넣기	initialValue: '# 제목입니다'
✅ HTML 변환	editorInstance.current?.getHTML()
✅ 이미지 업로드 커스텀	hooks: { addImageBlobHook: (blob) => { ... } }
✅ Toolbar 커스텀	toolbarItems: [...]