[React] Toast-UI Editor 폰트 컬러(글자 색상) 설정 color-syntax 플러그인 사용 방법

# Toast-UI Editor 폰트 컬러(글자 색상) 설정 플러그인 추가 방법

리액트에서 Toast-UI Editor 사용시,

글자 색깔을 설정할 수 있는 color-syntax 플러그인 사용법을 정리한다.

 

(기본 툴바 옵션에 제공되지 않아, 플러그인을 설치하고 사용해야 한다. 매우 간단하다)

 

- 공식 깃허브: https://github.com/nhn/tui.editor/tree/master/plugins/color-syntax

---

* Toast-UI Editor 자체의 기본 사용 방법은 아래 글을 참고하자.

[React] Toast UI Editor기본 사용 방법

---

1. 설치

- 리액트에서 사용할 경우, @toast-ui/editor-plugin-color-syntax 플러그인을 설치해준다.

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

 

2. 사용

- colorCyntax 및 관련 css 를 임포트 해주고,

- Editor 컴포넌트에 plugins 로 추가해주면 끝!

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

// Toast ColorSyntax 플러그인
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';

export default function ToastEditor() {

  return (
    <div>

      <Editor

        placeholder="내용을 입력해주세요."
        previewStyle="vertical"
        height="300px"
        initialEditType="wysiwyg"
        toolbarItems={[['bold', 'italic', 'strike']]}
        plugins={[colorSyntax]}  // colorSyntax 플러그인 적용
      ></Editor>

    </div>
  );
}

* plugins 속성을 배열로 넣은 것을 주의하자!

 

 

3. 결과 확인

- 툴바에 text color 선택할 수 있는 옵션이 추가 되었다.

 

- 클릭하면 색상표가 표시된다.

 

 

4. 옵션 설정

- ColorSyntax에 추가 옵션으로 기본 설정 색상을 설정을 해줄 수 있다.

- preset 속성에 사용할 색을 추가해 주면 된다.

 

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

// Toast ColorSyntax 플러그인
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';

export default function ToastEditor() {

  return (
    <div>
    
      <Editor
        placeholder="내용을 입력해주세요."
        previewStyle="vertical"
        height="300px"
        initialEditType="wysiwyg"
        toolbarItems={[['bold', 'italic', 'strike']]}
        
        // colorSyntax 플러그인 적용
        plugins={[ 
          [
            colorSyntax,
            // 기본 색상 preset 적용
            {
              preset: ['#1F2E3D', '#4c5864', '#ED7675']
            }
          ]
        ]}
      ></Editor>

    </div>
  );
}

* 주의: 이중 배열로 plugins 설정한 것을 빠뜨리지 말자. (실수하기 딱 좋다.)

 

- 결과: preset 으로 지정해준 색이 적용되었다.