Viewer 만들기

이 문서에서는 Toast UI Editor를 이용하여 Viewer를 만드는 방법에 대해서 소개한다.

의존성 추가

의존성은 Editor와 동일하게 설정한다.

Viewer 영역 생성

viewer로 만들 영역을 HTML 내부에 div 태그로 작성한다.

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

Viewer 생성

javascript 코드를 사용하여 viewer를 다음과 같이 생성한다.

const viewer = toastui.Editor.factory({
    el : document.querySelector(".toast-custom-viewer"),
    viewer : true,
    initialValue : "Hello toast ui viewer~!"
});

만약 생성자를 이용하고 싶다면 CDN을 변경해야 한다.

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

Viewer용 CDN을 사용하면 에디터와 동일한 생성코드로 Viewer를 만들 수 있다.

const viewer = new toastui.Editor({
    el : document.querySelector(".toast-custom-viewer"),
    initialValue : "Hello toast ui viewer~!"
});

전체 코드

<!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-viewer">

    </div>

    <!-- toast ui viewer js -->
    <!-- <script src="https://uicdn.toast.com/editor/3.0.2/toastui-editor-viewer.min.js"></script> -->
    
    <!-- toast ui all js -->
    <script src="https://uicdn.toast.com/editor/3.0.2/toastui-editor-all.min.js"></script>
    <script>
        //Viewer용 CDN을 사용할 경우
        // const editor = new toastui.Editor({
        //     el : document.querySelector(".toast-custom-viewer"),
        //     initialValue : "Hello toast ui editor~!"
        // });

        //전체(ALL)용 CDN을 사용할 경우
        const editor = toastui.Editor.factory({
            el : document.querySelector(".toast-custom-viewer"),
            viewer:true,
            initialValue : "Hello toast ui editor~!"
        });
    </script>
</body>
</html>

PreviousFile upload Next문자 인코딩 방식

Last updated 1 year ago