Editor 만들기

Editor 만들기

이 문서에서는 Toast UI Editor를 생성하는 방법에 대해서 설명한다.

의존성 추가

Toast UI Editor 를 만들기 위해서 CSS와 JS의존성을 추가한다.

css 의존성 추가 (version 지정)

<link rel="stylesheet" href="https://uicdn.toast.com/editor/3.0.2/toastui-editor.min.css" >

css 의존성 추가 (최신 버전)

<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" >

js 의존성 추가 (version 지정)

<script src="https://uicdn.toast.com/editor/3.0.2/toastui-editor-all.min.js"></script>

js 의존성 추가 (최신 버전)

<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>

가급적 버전을 지정하여 사용하는 것을 권장한다. 버전이 올라가면서 생성방법 등이 달라지기 때문에 최신버전으로 만들어두면 향후 실행이 안될 가능성이 있다(경험담..).

그리고 JS는 body에 lazy loading 배치한다.

Editor 영역 생성

html 영역에 Toast UI Editor가 될 영역을 div 태그로 생성한다.

<div class="toast-custom-editor"></div>

id와 class 중 원하는 것을 이용하여 선택이 가능하도록 만든다. 여러 개 만들 필요가 있다면 class로 설정하는 편이 좋다.

가급적 toast-editor와 같은 클래스는 사용하지 않는 것이 좋다. 내부적으로 생성되는 영역에 할당되는 클래스이기 때문에 충돌로 인한 실행 불가 현상이 발생할 수 있다.

Editor 생성

추가한 의존성에서 제공하는 에디터 생성 코드를 작성하여 실제 에디터를 생성한다.

el에는 생성될 영역을 선택하여 연결한다. (선택자만 작성하면 생성되지 않는다)

const editor = new toastui.Editor({
    el : document.querySelector(".toast-custom-editor")
});

동적 할당 연산(new)을 사용하지 않고 제공하는 Factory를 이용해서 생성할 수도 있다.

const editor = toastui.Editor.factory({
    el : document.querySelector(".toast-editor")
});

전체 코드

작성된 전체 코드는 다음과 같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toast UI Editor example</title>

    <!-- toast ui editor css -->
    <link rel="stylesheet" href="https://uicdn.toast.com/editor/3.0.2/toastui-editor.min.css" >
</head>
<body>
    <div class="toast-custom-editor">

    </div>

    <!-- toast ui editor js -->
    <script src="https://uicdn.toast.com/editor/3.0.2/toastui-editor-all.min.js"></script>
    <script>
        const editor = new toastui.Editor({
            el : document.querySelector(".toast-custom-editor")
        });
    </script>
</body>
</html>
PreviousNaver ToastUI EditorNextEditor options

Last updated