Toast UI Editor

🚩목차

📜 개발 레퍼런스

TOAST UI :: Make Your Web Delicious!

tui.editor/v3.0-migration-guide-ko.md at master · nhn/tui.editor

TOAST UI Editor 사용법 ( 마크다운 에디터 Markdown Editor)

TIL 2022.07.18 Toast UI editor Javascript 구현

📌 토스트 UI 에디터?

토스트 UI 에디터는 웹 프론트엔드에 붙이는 편집기로, 텍스트 또는 WYSIWYG를 사용하여 마크다운 문서를 편집할 수 있으며 구문 강조 표시, 스크롤 동기화, 실시간 미리 보기 및 차트 기능이 함께 제공됩니다.

💡 목적

마크다운 형식으로 글을 작성하고 조회할 수 있는 여러 페이지들(예시로 깃허브와 벨로그가 있음)에서 아이디어를 차용했음
개발자를 위한 커뮤니티인 거뮤니티에서 질문을 더 쉽게 하기 위해서, 코드블럭이 포함된 마크다운 형식으로 글을 작성하고 보여줄 수 있다면 굉장히 편리할텐데!
따라서 사용자가 마크다운 형식으로 작성하면, 그대로 저장하고, 다시 페이지에서 보여줄 수 있는 에디터가 필요하다!

💻에디터(Editor)

에디터는 마크다운 방식과 코드블럭을 작성할 수 있는 편집기
편집기를 작성하고 싶은 곳에 코드를 넣어준다

👁‍🗨뷰어(Viewer)

뷰어는 마크다운 방식과 코드블럭을 화면에서 볼 수 있게 해주는 시각화 역할을 수행함
마크다운 형태의 글을 보고 싶은 곳에 코드를 넣어준다

✍ 사용법

💾 Toast UI Editor 라이브러리 임포트

Toast UI Editor 를 사용하기 위해서는 JQuery, Google Fonts와 같이 주소형태로 배포되어 있는 라이브러리를 가져와 주어야 함
CSS(스타일시트), JS(스크립트) 파일을 각각 head, body 태그 안에 넣어주어야 한다
또한 에디터와 뷰어 각각 사용할 수 있도록 스크립트에 코드를 작성해주어야 함

🗨 HTML 태그 작성

에디터와 뷰어를 작성하기 위한 div를 작성해주어야 한다
에디터와 뷰어는 각각 스크립트에서 사용되는 editor, viewer 라는 id 어트리뷰트를 함께 작성해주어야 한다

📜 Script 작성

div로 만들어진 태그에 스크립트를 적어 구현
에디터와 뷰어는 각각 Editor, Editor.Factory 라는 Toast UI Editor 내장 함수를 사용한다

👨‍💻 코드

Editor 코드

<!DOCTYPE html>
<html>

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

<body>                
  <div id="editor"></div>

    <script>
        const Editor = toastui.Editor;

        const editor = new Editor({
                el: document.querySelector('#editor'),
                height: '500px',
                initialEditType: 'markdown',
                previewStyle: 'vertical'
            });
    </script>
</body>

</html>

Viewer 코드

<!doctype html>
<html lang="en">

<head>
    <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 id="viewer"></div>
  <script src="https://uicdn.toast.com/editor/2.0.0/toastui-editor-all.min.js"></script>
    <script>
        // initialValue는 기본값이 content로 되어 있음
        // 사용하기 위해서는 넣을 데이터를 content로 선언해야함

        const viewer = toastui.Editor.factory({
        el: document.querySelector('#viewer'),
        viewer: true,
        height: '500px',
        initialValue: details.content
    });
    </script>
</body>
</html>

🚩질문 정리

왜 에디터는 변수로 선언해주나요?

변수로 선언한 것은 함수로 실행시킨 에디터, 뷰어를 내장함수를 통해 재사용하기 위한 것
재사용할 생각이 없다면 변수로 선언하지 않아도 되지만, toastui.Editor() 와 같은 함수를 호출하는 방식은 반드시 필요하다

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

뷰어와 관련된 스크립트의 위치는?

뷰어는 함수를 호출할 때 값을 넣을 initialValue 라는 값을 요구한다
마크다운으로 보여줄 데이터 값을 의미하는데, API를 통해서 데이터를 전달받는다면, 데이터를 돌려받는 API 내부에 이 코드가 들어있어야 initialValue를 전달할 수 있다
에디터를 따로 js 파일로 빼주려면 해당 코드를 함수로 선언하고, API에서 돌려줄 데이터를 담아 함수를 호출해주어야 한다!

window.onload = async function loadDetails() {
        // 데이터를 돌려주는 API GET Method
        // 안에 작성글의 데이터인 details.content가 포함되어 있다.
    const details = await QuestionDetail(question_id);

    // 마크다운 조회
    const viewer = toastui.Editor.factory({
        el: document.querySelector('#viewer'),
        viewer: true,
        height: '500px',
        initialValue: details.content
    });

'개발_TIL' 카테고리의 다른 글

개발_TIL \| 2022-09-08 (79) (0)	2022.09.08
개발_TIL \| 2022-08-08 (77) (0)	2022.08.09
개발_TIL \| 2022-08-05 (76) (0)	2022.08.09
개발_TIL \| 2022-08-04 (75) // feat) KPT (0)	2022.08.04
개발_TIL \| 2022-08-03 (74) (0)	2022.08.04

Hee

개발_TIL | 2022-08-09 (78)

Toast UI Editor

🚩목차

📜 개발 레퍼런스

📌 토스트 UI 에디터?

💡 목적

💻에디터(Editor)

👁‍🗨뷰어(Viewer)

✍ 사용법

💾 Toast UI Editor 라이브러리 임포트

🗨 HTML 태그 작성

📜 Script 작성

👨‍💻 코드

Editor 코드

Viewer 코드

🚩질문 정리

왜 에디터는 변수로 선언해주나요?

뷰어와 관련된 스크립트의 위치는?

'개발_TIL' 카테고리의 다른 글

티스토리툴바

개발_TIL | 2022-08-09 (78)

Toast UI Editor

🚩목차

📜 개발 레퍼런스

📌 토스트 UI 에디터?

💡 목적

💻에디터(Editor)

👁‍🗨뷰어(Viewer)

✍ 사용법

💾 Toast UI Editor 라이브러리 임포트

🗨 HTML 태그 작성

📜 Script 작성

👨‍💻 코드

Editor 코드

Viewer 코드

🚩질문 정리

왜 에디터는 변수로 선언해주나요?

뷰어와 관련된 스크립트의 위치는?

'개발_TIL' 카테고리의 다른 글

관련글

티스토리툴바