[React] Toast UI Editor 사용법

TOAST UI Editor란?

TOAST UI Editor(이하 'TUI 에디터')는 NHN Cloud에서 개발한 오픈 소스 라이브러리로, 마크다운과 위지윅 방식 모두를 지원하는 무료 에디터이다.

npm 설치

npm install @toast-ui/react-editor

import 하기

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

적용하기

return (
    ...
    <Editor />
    ...
  );

Editor 를 추가하게 되면 나오는 모습이다. 기본적으로

• 마크다운 , 위지윅 에디터를 작성할 수 있고 ,
• 작성화면과 미리화면을 볼 수 있으며 ,
• Heading , Bold , Italic , Strike 의 기본 속성과
• divider , 인용 , ul , ol 속성과 체크리스트 , 들여쓰기 , 테이블 등과
• 이미지첨부 , 링크 첨부 , 코드블럭

커스텀

<Editor
  previewStyle="vertical"
  initialEditType="wysiwyg"
  placeholder="글을 작성해 주세요"
  height="450px"
  toolbarItems={[    ['bold', 'italic', 'strike'],
    ['hr'],
    ['image', 'link'],
    ['ul', 'ol'],
    ['code', 'codeblock'],
  ]}
/>

• previewStyle : 마크다운 미리보기 화면을 나타내는 방법 , vertical 시 작성하면서 바로 미리보기를 볼 수 있다.
• initialEditType : 기본 에디터 타입. 마크다운과 위지윅중 기본 화면을 고를 수 있다.
• placeholder : 글이 없을때 placeholder.
• height : 높이를 지정할 수 있다.
• toolbarItems : 툴바에 사용할 아이템들을 커스텀 할 수 있다. []로 나뉘게 되면 부분을 나눌 수 있다.

실제 사용한 커스텀이다. 에디터 라이브러리의 가장 큰 장점이라고도 할 수 있는데 , 원하는 기능을 사용하고 필요없는 기능을 제거할 수 있는 것이 가장 큰 장점인 것 같다.

이미지 첨부

기본적으로 이미지 첨부 기능이 존재하긴 한다 . 하지만 이 경우에 생기는 문제가 있는데 , 바로 base64 인코딩이 되지 않고 첨부되는 모습이다.

이미지 첨부 커스텀

// 에디터 ref 설정
<Editor
  onChange={() => setContents(editorRef.current.getInstance().getHTML())}
  ref={editorRef}
 />
 
 // 이미지 첨부를 위한 코드
 
 useEffect(() => {
    if (editorRef.current) {
      // 기존 훅 제거
      editorRef.current.getInstance().removeHook('addImageBlobHook');
	  // 새로운 훅 추가
      editorRef.current.getInstance().addHook('addImageBlobHook', (blob, callback) => {
        (async () => {
          let formData = new FormData();
          formData.append('image', blob);

          console.log('이미지가 업로드 됐습니다.');

          await axios.post(`{저장할 서버 api}`, formData, {
            header: { 'content-type': 'multipart/formdata' },
            withCredentials: true,
          });

          const imageUrl = '저장된 서버 주소' + blob.name;

          setImages([...images, imageUrl]);
          callback(imageUrl, 'image');
        })();

        return false;
      });
    }

    return () => {};
  }, [editorRef]);