Toast UI 사용법 (기본법)

KHW·2020년 12월 16일

TOAST UI

다양한 지식쌓기

목록 보기

1/48

1. 의도

강의를 들으면서 Toast UI라는 것에 대해 사용해보고 싶어지게 되었다.

2. 사용법

기본적으로 여러 내용을 가진 .js나 .css를 가져와야한다.

1) link

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css">
<link rel="stylesheet" href="https://uicdn.toast.com/editor/2.0.0/toastui-editor.min.css">

위에 link는 MarkDown언어실행시 정상적 타이핑이 되기 위해 사용되는 것 같고
아래 link는 툴바의 역할을 수행하는것 같았다.

2) editor


        <div id="editor" style="box-sizing: border-box; height: 500px;">

3) button

    <button onclick="ToView();">↓↓↓ 불러서 넣기 ↓↓↓</button>

4) viewer

	      <div id="viewer"></div>

5) script 1

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

해당 관련된 src를 가져온다.

6) script 2

 	const content = [].join('\n');

        const editor = new toastui.Editor({
            el: document.querySelector('#editor'),
            previewStyle: 'vertical',
            initialEditType: "wysiwyg",
            height: '500px',
            initialValue: content
        });

        const viewer = toastui.Editor.factory({
            el: document.querySelector('#viewer'),
            viewer: true,
            height: '500px',
            initialValue: content
        });

        function ToView()
        {
            viewer.setMarkdown(editor.getMarkdown());
        };

editor를 다루는 변수 editor와 viewer를 다루는 변수 viewer를 통해
ToView 함수를 이용해 editor에 쓴 getMarkdown 내용들이 viewer에 setMarkdown 되게 만들어낸다.

모든 코드

<html><head lang="en">
    <meta charset="UTF-8">		//없으면 이상한 숫자가 옆에 붙음
    <title>1. 설치와 기본기능 사용</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css">
    <link rel="stylesheet" href="https://uicdn.toast.com/editor/2.0.0/toastui-editor.min.css">
   
</head>
<body>
    <div class="tui-doc-description">
        <h3>Toast UI Editor 2.0.0 Test</h3>
        <h2>설치와 기본기능 사용</h2>
    </div>

        <div id="editor" style="box-sizing: border-box; height: 500px;"></div>
	<br>
    <button onclick="ToView();">↓↓↓ 불러서 넣기 ↓↓↓</button>
    <br>

        <div id="viewer"></div>
  
    <script src="https://uicdn.toast.com/editor/2.0.0/toastui-editor-all.min.js"></script>

    <script>

        /* eslint-disable no-unused-vars */
        const content = [].join('\n');

        const editor = new toastui.Editor({
            el: document.querySelector('#editor'),
            previewStyle: 'vertical',
            initialEditType: "wysiwyg",
            height: '500px',
            initialValue: content
        });

        const viewer = toastui.Editor.factory({
            el: document.querySelector('#viewer'),
            viewer: true,
            height: '500px',
            initialValue: content
        });

        function ToView()
        {
            viewer.setMarkdown(editor.getMarkdown());
        };
    </script>


</body></html>

출처 : https://forward.nhn.com/session/5

KHW

나의 하루를 가능한 기억하고 즐기고 후회하지말자

다음 포스트