[React] Toast-UI Editor 게시물 수정 방법(에디터 html/markdown표시)

# Toast-UI Editor 게시물 수정 방법(== 에디터에 HTML/Markdown 표시)

Toast-UI Editor 로 작성된 HTML/Markdown 문서를 DB에 저장했다가,

글 수정 기능 등을 구현하기 위해 다시 Editor 로 불러와 노출해야 하는 경우가 있다.

 

*** 그냥 HTML이나 Markdown으로 작성된 글을 Viewer로 띄우는 방법은 아래글 참고.

[React] Toast UI Viewer 사용 방법: HTML태그, Markdown 표시 뷰어

 

이 글은 Toast-UI Editor의 "에디터 편집 영역" 에 HTML이나 Markdown을 표시하는 방법을 정리한다.

---

아래의 코드 한줄이면 끝이다.

// 1. HTML을 에디터에 표시 설정
Editor.prototype.getInstance().setHTML("HTML string")

// 2. Markdown을 에디터에 표시 설정
Editor.prototype.getInstance().setMarkdown("마크다운 string")

 

실제 사용 예제 코드는 아래와 같다.(HTML을 에디터에 주입하여 디스플레이한다)

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

import React, { useEffect, useRef } from 'react';

export default function UpdateTest() {
  // Toast-UI Editor DOM
  const editorRef = useRef();

  // Toast-UI Editor 에 HTML 표시
  useEffect(() => {
    // 1. DB에서 가져온 HTML이라고 가정
    const htmlString = '<h1>h1 제목</h1> <p>p 내용</p>';

    // 2. Editor DOM 내용에 HTML 주입
    editorRef.current?.getInstance().setHTML(htmlString);
  }, []);

  return (
    <div>
      <Editor
        ref={editorRef} // useRef로 DOM 연결
        previewStyle="vertical"
        height="300px"
        initialEditType="wysiwyg"
        toolbarItems={[['bold', 'italic', 'strike']]}
      ></Editor>
    </div>
  );
}

---

결과물은 깔끔하게 잘 나온다.

 

이제 텍스트를 입력하고 삭제하며 수정할 수 있게 되었다.

아주 간단하다.

---

도움이 되셨길 바랍니다.