React: TOAST UI Editor

MDEditor에서 TOAST UI Editor로 교체하면 다음과 같은 이점

TOAST UI Editor 장점

• iframe/HTML 처리 훌륭함 (iframe 삽입 문제 해결됨)

• wysiwyg + markdown 모드 전환 가능

• 테마 커스터마이징 잘 됨

• @toast-ui/react-editor로 쉽게 React 통합 가능

교체를 위한 기본 절차

1. 패키지 설치

npm install @toast-ui/react-editor @toast-ui/editor
npm install codemirror --save

--혹은

yarn add @toast-ui/react-editor

2. CSS 임포트

// App.js 또는 BlogDetail.jsx 상단
import '@toast-ui/editor/dist/toastui-editor.css';

3. 컴포넌트 적용

import { Editor } from '@toast-ui/react-editor';
import '@toast-ui/editor/dist/toastui-editor.css';

<Editor
  initialValue={form.content}
  previewStyle="vertical"
  height="600px"
  initialEditType="markdown"
  useCommandShortcut={true}
  onChange={() => {
    const instance = editorRef.current.getInstance();
    const markdown = instance.getMarkdown();
    setForm((prev) => ({ ...prev, content: markdown }));
  }}
  ref={editorRef}
/>

4. Ref 정의

const editorRef = useRef();

변경 시 고려사항

• MDEditor → Editor로 변경

• onChange 방식이 다름 (getInstance().getMarkdown() 사용)

• CSS 커스터마이징 필요할 수 있음 (예: blockquote, 코드 등)