TOAST UI Editor 설치하기

TOAST UI Editor 사용하기

 

2가지 방법으로 import 가능

1️⃣ ES Modules(이 방식으로 import할 예정)

import 'codemirror/lib/codemirror.css';
import '@toast-ui/editor/dist/toastui-editor.css';

import { Editor } from '@toast-ui/react-editor';

 

2️⃣ CommonJS

require('codemirror/lib/codemirror.css');
require('@toast-ui/editor/dist/toastui-editor.css');

const { Editor } = require('@toast-ui/react-editor');

 

---

TOAST UI Editor 설치

1️⃣ TOAST UI Editor에서 API/Examples 클릭

 

2️⃣ Documents에서 Getting Started 클릭

👉 TOAST UI Editor 설치 방법 나와있음(npm install을 이용한 설치 진행할 예정)

 

3️⃣ npm install을 이용한 설치

npm install --save @toast-ui/editor  # Latest Version

 

---

CodeMirror 설치(CDN 방식)

1️⃣ Adding CSS Files의 CodeMirror 링크 클릭 👉 codemirror.net/

 

2️⃣ 태그 복사 후 VSCode 파일에 붙여넣기

public → index.html → body 태그안에 복사한 내용 붙여넣기

<!-- Create a simple CodeMirror instance -->
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>

모든 준비 완료🎉🎉

 

 

---

Editor를 React에서 불러오기

App.js의 내용 지우고(그 안의 방식대로 사용하지 않기 때문) ES Modules부분 붙여넣기

import React, {Component} from 'react';
import 'codemirror/lib/codemirror.css';
import '@toast-ui/editor/dist/toastui-editor.css';

import { Editor } from '@toast-ui/react-editor';

export default App;

 

---

Instance Methods 만들기

문서안의 Instance Methods 예제 코드 App.js에 복붙하기

App.js👇

import React, {Component} from 'react';
import 'codemirror/lib/codemirror.css';
import '@toast-ui/editor/dist/toastui-editor.css';

import { Editor } from '@toast-ui/react-editor';

class App extends Component {
  editorRef = React.createRef();

  handleClick = () => {
    this.editorRef.current.getInstance().exec('Bold');
  };

  render() {
    return (
      <>
        <Editor
          previewStyle="vertical"
          height="400px"
          initialEditType="markdown"
          initialValue="hello"
          ref={this.editorRef}
        />
        <button onClick={this.handleClick}>make bold</button>
      </>
    );
  }
}

export default App;

npm start (로컬 호스트에서 현재 페이지 열어보기)

TOAST UI Editor 화면 확인하기🎊

---

참고자료👇

TOAST UI Editor 공식 문서

github.com/nhn/tui.editor/tree/master/apps/react-editor

nhn/tui.editor