[FE] Toast UI Editor로 3초 만에 텍스트 에디터 띄우기🥪

 

개요

프로젝트에서 글쓰기 기능이 있어서 텍스트 에디터를 찾아보다 TOAST UI Editor를 알게 됐다. NHN에서 만든 건데 다른 에디터들에 비해 완전 쉽고 옵션도 편하게 설정할 수 있어서 강추한다~! TOAST UI에는 텍스트 에디터 말고도 다른 컴포넌트들도 많아서 앞으로 자주 사용하게 될 것 같다. 

 

사용법

1. 설치

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

 

2.  Editor 

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

const SignatureWritePage = () => {
  return (
    <div>
      <Editor />
    </div>
  );
};

export default SignatureWritePage;

 

이렇게만 하면 아래 사진처럼 기본 설정된 Editor가 나타난다.

 

<Editor
        initialValue="cowboysj"
        previewStyle="vertical"
        height="600px"
        initialEditType="wysiwyg"
        useCommandShortcut={false}
        ref={editorRef}
        onChange={onChange}
      />

 

이런 식으로 다양한 옵션을 설정해줄 수 있다. 

참고로, 작성한 텍스트를 가져올 때는 꼭 const editorRef = useRef();를 선언하고 ref를 넣어줘야 한다.

 

또, 작성한 텍스트를 가져오기 위해선 onChange 함수를 넣어주면 된다.

const onChange = () => {
    const data = editorRef.current.getInstance().getHTML();
    console.log(data);
  };

 

html 형식으로 가져오고 싶다면 getHTML()을 넣어주면 되고, 마크다운 형식으로 가져오고 싶다면 getMarkdown()을 해주면 된다. 

 

3. Viewer

import '@toast-ui/editor/dist/toastui-editor-viewer.css';
import { Viewer } from '@toast-ui/react-editor';
const data =
    '# 여행의이유 : <br/>즐거운 여행을 떠나봅시당~!<br/> Development Environment : `REACT`';

export default function ViewerComponent(){
	return (
	<Viewer initialValue={data} />
	);
}

 

이렇게 viewer를 넣어주고 안에 데이터를 넣어주면 아래처럼 뜬다. 

 

이게 끝이다!🌟

 

 

 

아래 공식문서에 들어가서 보면, 다양한 옵션들을 볼 수 있다. 

https://nhn.github.io/tui.editor/latest/

https://nhn.github.io/tui.editor/latest/