리액트 - Toast UI로 에디터 만들기 (React Editor with Toast Editor 3.0)

리액트 전체 링크

 

참고

- https://www.npmjs.com/package/@toast-ui/react-editor

- https://nhn.github.io/tui.editor/latest/tutorial-example01-editor-basic

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

 

- Toast UI로 에디터 만들기

- 글자색 변경 플러그인 추가하기

- 테이블 병합 플러그인 추가하기

- 에디터 저장하고 초기화하기

- Toast UI 에디터로 깃허브 마크다운 저장하기

- Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기

- Socket.IO로 Toast UI Editor 동시 편집하기

 

React에서 토스트 UI 에디터를 적용해보자.

---

설치

 

toast-ui/react-editor를 설치하자.

npm install @toast-ui/react-editor

 

사용 방법은 아래와 같다.

Material UI의 Box로 margin을 추가하였다.

import React from "react";

import Box from "@mui/material/Box";

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

const App = () => {
  return (
    <div>
      <Box sx={{ m: 2 }}>
        <h1>Toast UI Editor</h1>
        <Editor
          height="400px"
          placeholder="Please Enter Text."
        />
      </Box>
    </div>
  );
};

export default App;

 

height와 placeholder를 옵션으로 추가한 경우 아래와 같이 보이게 된다.

---

옵션 

- previewStyle (마크다운 - vertical or tab 옵션)

- initialEditType (처음 편집 타입 설정 wysiwyg or markdown)

- hideModeSwitch (하단 바 숨김 여부)

- toolbarItems (툴바 옵션)

- dark theme (다크 테마 적용)

- useCommandShortcut (키보드 입력 컨트롤 방지)

- usageStatistics (통계 수집)

 

previewStyle="vertical" 로 설정하면 마크다운에서 양 옆이 나뉜다.

previewStyle="tab" 인 경우는 Write와 Preview 탭이 생긴다.

 

initialEditType="wysiwyg" 로 설정하면 시작 편집 모드를 Markdown 대신 WYSIWYG로 변경할 수 있다.

 

hideModeSwitch={true} 를 설정하면 Markdown과 WYSIWYG 탭이 사라진다.

 

툴바 옵션의 예시는 다음과 같다.

아래는 image 버튼을 삭제한 경우다.

toolbarItems={[ // 툴바 옵션 설정
            ["heading", "bold", "italic", "strike"],
            ["hr", "quote"],
            ["ul", "ol", "task", "indent", "outdent"],
            ["table", /* "image", */ "link"],
            ["code", "codeblock"],
          ]}

 

이미지 버튼이 사라진 것을 알 수 있다.

 

다크 테마를 적용하려면 아래 css를 import 해야 한다.

// Dark Theme 적용
import '@toast-ui/editor/dist/toastui-editor.css';
import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';

 

그리고 아래 옵션을 추가하면 된다.

theme="dark"

 

구글 분석 통계 수집을 거부하려면 usageStatistics를 false로 설정하면 된다.

usageStatistics={false} // 통계 수집 거부

 

그 외 여러 옵션은 아래 링크를 참고하자.

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

 

다음 글에서 아래 코드로 시작해서 글자색을 변경하는 플러그인을 추가해보자.

import React from "react";

import Box from "@mui/material/Box";

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

// Dark Theme 적용
// import '@toast-ui/editor/dist/toastui-editor.css';
// import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';

const App = () => {
  return (
    <div>
      <Box sx={{ m: 2 }}>
        <h1>Toast UI Editor</h1>
        <Editor
          height="400px"
          placeholder="Please Enter Text."
          previewStyle="tab" // or vertical
          initialEditType="wysiwyg" // or markdown
          // hideModeSwitch={true} // 하단 숨기기
          toolbarItems={[ // 툴바 옵션 설정
            ["heading", "bold", "italic", "strike"],
            ["hr", "quote"],
            ["ul", "ol", "task", "indent", "outdent"],
            ["table", /* "image", */ "link"],
            ["code", "codeblock"],
          ]}
          //theme="dark"
          //useCommandShortcut={false} // 키보드 입력 컨트롤 방지 ex ctrl z 등
          usageStatistics={false} // 통계 수집 거부
        />
      </Box>
    </div>
  );
};

export default App;

---

에러 수정

 

소스맵 에러가 발생하는 경우에는 package.json에서 GENERAGE_SOURCEMAP을 false로 설정하면 된다.

Failed to parse source map from '~\node_modules\@toast-ui\editor\dist\purify.js.map' 
file: Error: ENOENT: no such file or directory, 
open 'D:\project\codiary\client\node_modules\@toast-ui\editor\dist\purify.js.map'

 

package.json을 참고하자.

  "scripts": {
    "start": "set \"GENERATE_SOURCEMAP=false\" && react-scripts start",
    "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },