리액트 - Toast UI 에디터 글자색 변경 플러그인 추가하기 (Add Color Syntax Plugin Toast UI Editor)

리액트 전체 링크

 

참고

- https://nhn.github.io/tui.editor/latest/tutorial-example09-editor-with-color-syntax-plugin

 

- Toast UI로 에디터 만들기

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

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

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

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

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

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

 

토스트 UI 에디터에 글자색을 변경하는 기능을 추가해보자.

---

설치

 

color-syntax 플러그인을 설치한다.

npm install @toast-ui/editor-plugin-color-syntax

 

플러그인을 사용하려면 아래의 css와 colorSyntax를 import 하면 된다.

// Color Syntax Plugin
import "tui-color-picker/dist/tui-color-picker.css";
import "@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css";
import colorSyntax from "@toast-ui/editor-plugin-color-syntax";

 

Editor에 plugins에 colorSyntax를 추가하자.

plugins={[colorSyntax]}

배열로 [ ] 넣어야 되는 것에 주의하자.

 

이제 에디터에 글자색을 변경할 수 있는 버튼이 추가되었다.

---

기본 색상 설정하기

 

위에서 정해진 기본 색상을 변경할 수 있다.

아래와 같이 옵션 변수에 preset으로 색상을 설정하면 된다.

const colorSyntaxOptions = {
  preset: [
    "#333333", "#666666", "#FFFFFF", "#EE2323", "#F89009", "#009A87", "#006DD7", "#8A3DB6",
    "#781B33", "#5733B1", "#953B34", "#FFC1C8", "#FFC9AF", "#9FEEC3", "#99CEFA", "#C1BEF9",
  ],
};

 

plugins에 colorSyntaxOptions를 포함한 2차원 배열로 설정한다.

plugins={[[colorSyntax, colorSyntaxOptions]]}

 

preset의 색상으로 변경된 것을 알 수 있다.

 

전체 코드는 다음과 같다.

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';

// Color Syntax Plugin
import "tui-color-picker/dist/tui-color-picker.css";
import "@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css";
import colorSyntax from "@toast-ui/editor-plugin-color-syntax";

const colorSyntaxOptions = {
  preset: [
    "#333333", "#666666", "#FFFFFF", "#EE2323", "#F89009", "#009A87", "#006DD7", "#8A3DB6",
    "#781B33", "#5733B1", "#953B34", "#FFC1C8", "#FFC9AF", "#9FEEC3", "#99CEFA", "#C1BEF9",
  ],
};

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} // 통계 수집 거부
          plugins={[[colorSyntax, colorSyntaxOptions]]}
        />
      </Box>
    </div>
  );
};

export default App;