이 문서에서는 Toast UI Editor를 이용하여 Viewer를 만드는 방법에 대해서 소개한다.
의존성은 Editor와 동일하게 설정한다.
viewer로 만들 영역을 HTML 내부에 div 태그로 작성한다.
<div class="toast-custom-viewer"></div>
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>