[React] 🍞TOAST UI 사용법

내 담당은 아니었지만, 사용법이 궁금해서 찾아보았다.
감사하게도 잘 정리된 블로그가 있었으며 하다가 궁금한 부분들은 더 찾아봤다.
👉 TOAST UI 사용법 정리된 블로그

🍞 설치

npm install @toast-ui/react-editor

🍞 코드 예제

ToastUI.js

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

import { useRef, useState, useEffect } from "react";

const ToastUI = ({ initialValue = "" }) => {
  const [initialValueState, setInitialValueState] = useState(initialValue); // initialValue 값을 상태값으로 관리

  // Editor DOM 선택용
  const editorRef = useRef(null);

  useEffect(() => {
    if (editorRef.current) {
      editorRef.current.getInstance().focus();
      if (initialValue === "") {
        editorRef.current.getInstance().reset();
      } else {
        editorRef.current.getInstance().setMarkdown(initialValue); // cursor를 초기값의 뒤에 위치시킴
        setInitialValueState(initialValue);
      }
    }
  }, [initialValue]);

  // 등록 버튼 핸들러
  const handleRegisterBtn = () => {
    // 입력창에 입력한 내용을 MarkDown 형태로 취득
    console.log(editorRef.current?.getInstance().getMarkdown());
    // 입력창에 입력한 내용을 HTML 태그 형태로 취득
    console.log(editorRef.current?.getInstance().getHTML());
  };

  return (
    <>
      <h2>🖋 Editor Toast</h2>
      <Editor
        placeholder="내용을 입력해주세요."
        previewStyle="vertical" // 미리보기 스타일 지정
        height="300px" // 에디터 창 높이
        initialEditType="wysiwyg" // 초기 입력모드 설정(디폴트 markdown)
        initialValue={initialValueState}
        toolbarItems={[
          // 툴바 옵션 설정
          ["heading", "bold", "italic", "strike"],
          ["hr", "quote"],
          ["ul", "ol", "task", "indent", "outdent"],
          ["table", "image", "link"],
          ["code", "codeblock"],
        ]}
        ref={editorRef}
        useCommandShortcut={true} // 키보드 입력 컨트롤 방지
      />
      <button onClick={handleRegisterBtn}>등록</button>
    </>
  );
};

export default ToastUI;

App.js

import "./App.css";
import ToastUI from "./components/ToastUI";

function App() {
  return (
    <>
      <h1>토스트UI 웹에디터 사용 예제</h1>
      <ToastUI />
    </>
  );
}

export default App;