> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/etc/naver-toastui-editor/editor-quick-start.md).
# Editor 만들기
## Editor 만들기
이 문서에서는 Toast UI Editor를 생성하는 방법에 대해서 설명한다.
### 의존성 추가
Toast UI Editor 를 만들기 위해서 CSS와 JS의존성을 추가한다.
#### css 의존성 추가 (version 지정)
```markup
```
#### css 의존성 추가 (최신 버전)
```markup
```
#### js 의존성 추가 (version 지정)
```markup
```
#### js 의존성 추가 (최신 버전)
```markup
```
가급적 버전을 지정하여 사용하는 것을 권장한다. 버전이 올라가면서 생성방법 등이 달라지기 때문에 최신버전으로 만들어두면 향후 실행이 안될 가능성이 있다(경험담..).
그리고 JS는 body에 lazy loading 배치한다.
### Editor 영역 생성
html 영역에 Toast UI Editor가 될 영역을 div 태그로 생성한다.
```markup
```
id와 class 중 원하는 것을 이용하여 선택이 가능하도록 만든다. 여러 개 만들 필요가 있다면 class로 설정하는 편이 좋다.
{% hint style="info" %}
가급적 toast-editor와 같은 클래스는 사용하지 않는 것이 좋다. 내부적으로 생성되는 영역에 할당되는 클래스이기 때문에 충돌로 인한 실행 불가 현상이 발생할 수 있다.
{% endhint %}
### Editor 생성
추가한 의존성에서 제공하는 에디터 생성 코드를 작성하여 실제 에디터를 생성한다.
el에는 생성될 영역을 선택하여 연결한다. (선택자만 작성하면 생성되지 않는다)
```javascript
const editor = new toastui.Editor({
el : document.querySelector(".toast-custom-editor")
});
```
동적 할당 연산(new)을 사용하지 않고 제공하는 Factory를 이용해서 생성할 수도 있다.
```javascript
const editor = toastui.Editor.factory({
el : document.querySelector(".toast-editor")
});
```
### 전체 코드
작성된 전체 코드는 다음과 같다.
```markup
Toast UI Editor example