아는 만큼 재밌는 개발 Coding Knowjam(코딩노잼)

Etc

[TOAST UI Editor] 토스트UI 에디터 사용하기

coding-knowjam(코딩노잼) 2020. 12. 2.
728x90

안녕하세요

오늘은 Wysiwyg 에디터 중 하나인 TOAST UI Editor 세팅에 대해서 알아보겠습니다.

최근에 개인적으로 진행하는 프로젝트 중에 Wysiwyg에디터가 필요한데 오픈소스 중에 사용하기 좋을만한 게 뭐가 있을까 하고 찾던 도중에 발견하게 되었습니다.

기존에 존재하는 오픈소스 중에 CKEditor나 SmartEditor도 살펴보았는데 CK는 라이선스가 애매모호하기도 하고, 스마트 에디터는 이미지 업로드가 따로 구현(기존 가이드가 PHP로 되어있음...)이 좀 필요할 것 같더라고요.

이미지 업로드가 되면서 간단하게 게시글 작성하기에는 TOAST UI Editor가 제일 적당한 것 같아서 선택했습니다.

 

TOAST UI Editor 란?

TOAST UI Editor는 NHN에서 개발한 오픈소스로, 마크다운과 위지윅 방식을 지원하는 에디터입니다.

국내에서 개발한 오픈소스 중에 최초로 github 1만 스타 달성을 할 만큼 인정받고 있다는 소리겠지요??~

그럼 거두절미하고 세팅방법에 대해서 얘기해보겠습니다. 

 

TOAST UI Editor 세팅

1. 사이트 접속

https://ui.toast.com/tui-editor에 접속하시면 아래와 같은 화면이 보이실 거예요.   

해당 화면에서 API/Examples 버튼 클릭(Github는 궁금하시면 들어가 보세요~)

TOAST UI Edirot 사이트 화면 1

 

2. Examples 확인

좌측 메뉴 중 Examples을 클릭하시면 여러 가지 샘플을 보실 수 있습니다.

가운데 콘텐츠 화면에서 JavaScript와 HTML탭을 눌러보시면 구현에 필요한 소스를 소개해 주고 있으므로 이를 이용해서 TOAST UI Editor를 만들면 됩니다.

TOAST UI Edirot 사이트 화면 2

 

3. JavaScript와 HTML 소스 확인

우선 사이트에서 제공해주는 JavaScript와 HTML 소스는 따로 복사해두겠습니다.

// 사이트에서 복사한 JavaScript 소스 코드
// const를 사용하는거 보니 ES6방식을 사용하나 봅니다.

const editor = new toastui.Editor({
     el: document.querySelector('#editor'),
     previewStyle: 'vertical',
     height: '500px',
     initialValue: '안녕하세요. 코딩노잼입니다.'
});

 

<!-- 사이트에서 복사한 HTML소스코드 -->
<!-- DIV하나만 있으면 됩니다. 참 쉽죠?-->
<div id="editor"></div>

 

4. HTML 소스코드 삽입

구현을 위해 HTML 페이지를 하나 만들고 그 안에 복사한 HTML 소스코드를 넣어줍니다.

JavaScript 코드는 나중에 넣어주겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    
    <!-- 보기 편하게 CSS추가해주었습니다. -->
    <style>
        * {
            text-align:  center;
        }
        #editor {
            border : 1px solid;
            width : 50%;
            margin : 0 auto;
        }
    </style>
</head>
<body>
    <h1> TOAST UI Editor 만들기 </h1>
    
    <!-- TOAST UI Editor가 들어갈 div태그 -->
    <div id="editor"></div>
</body>
</html>

실행하면 아래와 같은 화면입니다.

신규생성 HTML 화면

 

5. 라이브러리 가져오기

JavaScript 소스코드를 사용하기 위해 TOAST UI Editor 라이브러리(. js)를 가져와야 합니다.

외부 라이브러리의 URL 주소는 가이드 문서(github.com/nhn/tui.editor/blob/master/apps/editor/docs/getting-started.md)에서 확인할 수 있고, 2가지 방식으로 불러올 수 있습니다.

  • npm을 통한 인스톨 방식 (node.js 사용 시)
  • CDN을 통한 방식

저는 node.js를 사용하지 않으므로 CDN방식을 사용하겠습니다. 주소는 아래와 같습니다.

TOAST UI 편집기 CDN URL (JS)

 

앞에서 생성한 HTML 코드의 <div> 태그 아래에 넣어 주세요.

<script> 태그는 반드시 editor로 사용할 <div> 태그 아래에 넣어주셔야 합니다. 

<div> 태그가 로딩이 끝난 이후에 <script> 태그가 실행되지 않으면 에러가 발생합니다. 주의!!!

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    
    <!-- 보기 편하게 CSS추가해주었습니다. -->
    <style>
        * {
            text-align:  center;
        }
        #editor {
            border : 1px solid;
            width : 50%;
            margin : 0 auto;
        }
    </style>
</head>
<body>
    <h1> TOAST UI Editor 만들기 </h1>
    
    <!-- TOAST UI Editor가 들어갈 div태그 -->
    <div id="editor"></div>
    <!-- TOAST UI Editor CDN URL(JS) -->
    <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
</body>
</html>

 

TOAST UI Editor의 CSS도 추가해주겠습니다.

CSS의 CDN URL 주소는 아래와 같습니다.

TOAST UI CDN URL (CSS)

 

앞에서 생성한 HTML 코드의 <head> 태그 안에 넣어 주겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    
    <!-- 보기 편하게 CSS추가해주었습니다. -->
    <style>
        * {
            text-align:  center;
        }
        #editor {
            border : 1px solid;
            width : 50%;
            margin : 0 auto;
        }
    </style>
    
    <!-- TOAST UI Editor CDN URL(CSS)-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css"/>
    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
</head>
<body>
    <h1> TOAST UI Editor 만들기 </h1>
    
    <!-- TOAST UI Editor가 들어갈 div태그 -->
    <div id="editor"></div>
    <!-- TOAST UI Editor CDN URL(JS) -->
    <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
</body>
</html>

 

6. TOAST UI Editor 생성 코드 추가

TOAST UI Editor를 만들기 위한 CDN추가는 끝입니다. 이제 생성을 위한 코드를 추가해보겠습니다.

3번 항목에서 복사한 JavaScript 코드를 CDN URL 아래에 추가해주세요.

에디터 바깥에 있는 실선이 보기 싫으므로 border 속성은 주석 처리해줬습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    
    <!-- 보기 편하게 CSS추가해주었습니다. -->
    <style>
        * {
            text-align:  center;
        }
        #editor {
            /* border : 1px solid; */
            width : 50%;
            margin : 0 auto;
        }
    </style>
    
    <!-- TOAST UI Editor CDN URL(CSS)-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css"/>
    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
</head>
<body>
    <h1> TOAST UI Editor 만들기 </h1>
    
    <!-- TOAST UI Editor가 들어갈 div태그 -->
    <div id="editor"></div>
    <!-- TOAST UI Editor CDN URL(JS) -->
    <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
    
    <!-- TOAST UI Editor 생성 JavaScript 코드 -->
    <script>
        const editor = new toastui.Editor({
            el: document.querySelector('#editor'),
            previewStyle: 'vertical',
            height: '500px',
            initialValue: '안녕하세요. 코딩노잼입니다.'
        });
    </script>
</body>
</html>

 

코드를 실행하면 아래 화면처럼 생성된 걸 볼 수 있습니다. (참 쉽죠?)

TOAST UI Editor 생성

 

참고사항

추가로 우리가 실제로 에디터에 입력된 데이터를 DB에 저장하기 위해서는 값을 받아와야 합니다.

이때 사용하는 메서드는 아래와 같습니다. (자세한 내용들은 API 문서를 확인해주세요.)

에디터 변수. getHtml() 
ex) editor.gethtml()

간단하게 입력된 값을 콘솔에 찍어보겠습니다. 아래와 같이 소스코드를 추가해주세요.

에디터 내용을 받아올 새로운 div태그와 css 그리고 자바스크립트 코드를 추가해주었습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    
    <!-- 보기 편하게 CSS추가해주었습니다. -->
    <style>
        * {
            text-align:  center;
        }
        #editor {
            /* border : 1px solid; */
            width : 50%;
            margin : 0 auto;
        }
        /* !!여기!! 새로운 div태그 스타일 추가해줫습니다. */
        #contents {
            width:50%;
            height: 100px;
            margin : 30px auto;
            border : 1px solid;
        }
    </style>

    <!-- TOAST UI Editor CDN URL(CSS)-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css"/>
    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
</head>
<body>
    <h1> TOAST UI Editor 만들기 </h1>
    
    <!-- TOAST UI Editor가 들어갈 div태그 -->
    <div id="editor"></div>
    <!-- !!여기!! 에디터 내용을 받을 div태그-->
    <div id="contents"></div>
    <!-- TOAST UI Editor CDN URL(JS) -->
    <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
    
    <!-- TOAST UI Editor 생성 JavaScript 코드 -->
    <script>
        const editor = new toastui.Editor({
            el: document.querySelector('#editor'),
            previewStyle: 'vertical',
            height: '500px',
            initialValue: '안녕하세요. 코딩노잼입니다.'
        });
        
        // !!여기!! editor.getHtml()을 사용해서 에디터 내용 받아오기
        document.querySelector('#contents').insertAdjacentHTML('afterbegin' ,editor.getHtml());
        console.log(editor.getHtml());
        
    </script>   
</body>
</html>

 

실행하면 다음과 같습니다.

콘솔에 적힌 로그를 보면 html형식으로 데이터가 들어오는 걸 보실 수 있습니다.

TOAST UI Editor입력된 내용 확인

728x90

'Etc' 카테고리의 다른 글

[MyBatis] @Mapper는 언제 사용하는걸까?  (8) 2020.12.30
[Tomcat] Tomcat에서 POST방식 요청 시 parameter가 null로 들어오는 경우에 확인해 볼 사항  (0) 2020.12.17
[Android] 안드로이드 스튜디오 설치 및 삭제(Let's install and uninstall Android Studio)  (2) 2020.11.11

댓글

티스토리툴바