NHN Cloud TOAST UI Editor는 패키지 매니저를 이용하거나, 직접 소스 코드를 다운받아 사용할 수 있다. 하지만 패키지 매니저 사용을 권장한다.
각 패키지 매니저가 제공하는 CLI 도구를 사용하면 쉽게 패키지를 설치할 수 있다. npm 사용을 위해선 Node.js를 미리 설치해야 한다.
$ npm install --save @toast-ui/editor # 최신 버전
$ npm install --save @toast-ui/editor@<version> # 특정 버전
npm을 통해 설치했다면, 아래와 같은 구조로 NHN Cloud TOAST UI Editor가 설치된 것을 볼 수 있다.
- node_modules/
├─ @toast-ui/editor/
│ ├─ dist/
│ │ ├─ toastui-editor.js
│ │ ├─ toastui-editor-viewer.js
│ │ ├─ toastui-editor.css
│ │ ├─ toastui-editor-viewer.css
│ │ └─ toastui-editor-only.css
NHN Cloud TOAST UI Editor는 CDN을 통해 사용할 수 있다.
...
<body>
...
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
</body>
...
특정 버전을 사용하려면 url 경로에서 latest 대신 버전 태그를 사용해야 한다.
CDN은 아래와 같은 디렉토리 구조로 구성된다.
- uicdn.toast.com/
├─ editor/
│ ├─ latest/
│ │ ├─ toastui-editor-all.js
│ │ ├─ toastui-editor-all.min.js
│ │ ├─ toastui-editor-viewer.js
│ │ ├─ toastui-editor-viewer.min.js
│ │ ├─ toastui-editor-editor.js
│ │ ├─ toastui-editor-editor.min.js
│ │ ├─ toastui-editor-editor.css
│ │ ├─ toastui-editor-editor.min.css
│ │ ├─ toastui-editor-viewer.css
│ │ └─ toastui-editor-viewer.min.css
│ ├─ 3.0.0/
│ │ └─ ...
NHN Cloud TOAST UI Editor(이하 '에디터'로 명시)가 생성될 컨테이너 요소를 추가한다.
...
<body>
<div id="editor"></div>
</body>
...
에디터는 생성자 함수를 통해 인스턴스를 생성할 수 있다. 생성자 함수에 접근하기 위해서는 환경에 따라 접근할 수 있는 세 가지 방법이 존재한다.
import Editor from '@toast-ui/editor';
const Editor = require('@toast-ui/editor');
const Editor = toastui.Editor;
에디터 사용을 위해 CSS파일을 추가해야 한다. Node.js 환경에서는 CSS 파일을 가져와 사용하며, CDN을 사용할 때는 html 파일에 CSS 파일 의존성을 추가하여 사용한다.
import '@toast-ui/editor/dist/toastui-editor.css'; // Editor 스타일
require('@toast-ui/editor/dist/toastui-editor.css');
...
<head>
...
<!-- Editor's Style -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
</head>
...
옵션과 함께 인스턴스를 생성하여 다양한 API를 호출할 수 있다.
const editor = new Editor({
el: document.querySelector('#editor')
});
const editor = new Editor({
el: document.querySelector('#editor'),
height: '600px',
initialEditType: 'markdown',
previewStyle: 'vertical'
});
대표적인 기본 옵션은 아래와 같다.
true
| false
더 많은 옵션은 여기서 볼 수 있다.
예제는 여기서 확인할 수 있다.