본문 바로가기
programming/TroubleShootInG

TOAST UI / 토스트 ui 에디터 붙이기 네이버 CDN 사용

by 개코 - 개발과 코딩 2022. 11. 27.

토스트 UI 에디터 ( TOAST UI Editor )는 네이버 블로그의 에디터와 비슷한 형태를 가지고 있어 사용자에게 익숙하다. CDN 을 통해 외부 스크립트를 이용하여 html 태그에 추가하는 방식이기에 자유롭게 사용할 수 있다. 모양새도 깔끔하고 처음 보는 사용자도 익숙하기 때문에 많이 사용될 듯 싶다.

토스트 UI 에디터
토스트 UI 에디터

TOAST UI Editor / 토스트 ui 에디터 붙이기 네이버 CDN 사용

토스트 UI ( TOAST UI ) 는 네이버의 NHN Cloud 에서 제공하는 자바스크립트 라이브러리 ( Javascript Library ) 이다. 무료 오픈 소스 프로젝트의 일환으로 번거로운 것들을 콤포넌트 형식으로 제공하고 있다.

토스트 UI 에디터 ( TOAST UI Editor ) 는 무료로 제공되는 자바스크립트 라이브러리 중 하나로 네이버 블로그 에디터와 비슷한 형태를 취하고 있다.

다른 외산에 비해 편의성이 좋아 보이긴 하지만 적용해 보고 지켜볼 문제다.

일단, 본인은 마음에 들었기에 별도로 제작중인 관리자에 넣기 위한 샘플을 제작해 보았다.

토스트 UI 에디터

홈페이지를 구성할 때 에디터는 꼭 필요한 존재이다.

html 태그에서 textarea 태그를 제공하고 여기에서 글쓰기를 할 수 있지만 기본적인 텍스트만 가능할 뿐 SEO 형식이나 이미지 등과 같은 리소스를 넣을 수는 없다.

에디터를 직접 구현하는 개발 용자분들도 있지만 이게 개발이 쉽지 않은 것도 사실이다.

글자 크기 및 정렬 이미지와의 배치 등 여러가지를 고려해야 하기 때문

토스트 UI 에디터 ( TOAST UI Editor ) 는 네이버 블로그에서 사용하는 에디터와 비슷한 형태를 가지고 있어 우리나라 사람들에게 익숙하다.

 

TOAST UI :: Make Your Web Delicious!

TOAST UI is an open-source JavaScript UI library maintained by NHN Cloud.

ui.toast.com

CDN 불러오기

토스트 UI 에디터 ( TOAST UI Editor ) 은 자바스크립트 라이브러리 ( Javascript Library ) 이기 때문에 외부 스크립트를 불러와야 한다.

CDN 에서 불러올 외부 파일은 2가지이다.

에디터의 동작을 위한 js 파일과 모양을 보여주기 위한 스타일 css 파일이다.

아래는 NHN Cloud 에서 제공하는 토스트 UI 에디터를 불러오는 코드이다.

<!-- TOAST UI Editor - NHN Cloud CDN JS -->
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>

에디터의 스타일을 위한 외부 스타일도 불러오도록 한다.

<!-- TOAST UI Editor Style - NHN Cloud CDN css style -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />

에디터 생성하기

토스트 UI 에디터 ( TOAST UI Editor ) 을 위한 js 파일과 css 스타일 파일을 불러왔다면 생성자를 통해 에디터를 생성해 주도록 한다.

아래는 토스트 UI 에디터를 사용하기 위한 에디터 생성 코드이다.

<!-- Javascript -->
<script>
    const Editor = toastui.Editor;
    const editor = new Editor({
        el: document.querySelector('#editor'),
        height: '500px',
        initialEditType: 'wysiwyg',
        previewStyle: 'vertical',
        initialValue:'<h2>제목</h2><p>내용</p>',
        usageStatistics: false
    });
</script>

<!-- HTML -->
<div class="contents">
	<div id="editor"></div>	
</div>

위의 에디터 생성자 코드에 대한 설명은 다음과 같다.

  • el
    에디터를 생성할 HTML 태그의 id 를 지정한다.
  • height
    에디터의 높이를 지정한다.
  • initialEditType
    사용자를 위한 에디터를 구성한다
    markdown, wysiwyg 중 하나를 선택한다.
  • previewStyle
    markdown 사용시 미리보기를 위한 구성을 한다.
    tab, vertical 중 하나를 선택한다.
  • initialValue
    에디터가 나타날 때 표시할 문자열을 html 형식으로 표현한다.
  • usageStatistics
    구글에 사용 통계를 위한 보고서를 보낸다.
    원하지 않는 경우 false 로 설정한다.

전체코드 결과 보기

이제 작성한 전체 코드를 살펴본다.

위의 코드를 그대로 사용했으며 차이는 없다.

토스트 UI 에디터 ( Toast UI Editor ) 부분은 주석으로 표시해 두었다.

주석부분을 살펴보도록 한다.

<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html lang="ko">
	<head>
		<!-- 반응형 meta 명시 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			/** 비영어권 문자열 깨짐 방지 */
			@charset "utf-8";

			/** 모든 여백 제거 */
			* {
				margin: 0;  /* 바깥 여백 */
				padding: 0; /* 안쪽 여백 */
			}
		</style>
		<style>
		</style>
	</head>
	<body>
		<!-- 디버깅 표시 -->
		<div class="debug">
			<span id="screenW"></span>
			<span id="screenW">X</span>
			<span id="screenH"></span>
		</div>
		<hr/>
		<!-- // -->
		<div class="header">
			<h1>웹사이트 이름</h1>
		</div>
		<hr/>
        
		<!-- Toast UI Editor -->
  		<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>
		<script>
			$(window).on('load', function() {
				/* Load Comp. with resources */

				const Editor = toastui.Editor;
				const editor = new Editor({
					el: document.querySelector('#editor'),
					height: '500px',
					initialEditType: 'wysiwyg',
					previewStyle: 'vertical',
					initialValue:'<h2>제목</h2><p>내용</p>',
					usageStatistics: false
				});
			});
		</script>
		<div class="contents">
			<div id="editor"></div>	
		</div>
		<!-- // Toast UI Editor -->
        
		<hr/>
		<div class="footer">저작권 소유자</div>
	</body>
	<!-- jquery cdn -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script>
		$(document).ready( function() { /* Load Comp. without resources */ });
		$(window).on('load', function() { /* Load Comp. with resources */ fnBrowserInnerSize(); });
	</script>
	<script>
		/** 웹브라우저 크기 변경 이벤트 */ 
		window.onresize = function() { fnBrowserInnerSize(); };
		/** 웹브라우저의 문서 크기 화면 표시 */ 
		var fnBrowserInnerSize = function() { $("#screenW").text(window.innerWidth); $("#screenH").text(window.innerHeight);};
	</script>
</html>

결과화면을 보도록 하자.

잘 붙었으며 글도 잘 써진다.

생김새는 네이버 블로그의 에디터와 비슷하다.

에디터 우측 하단의 Markdown 탭을 클릭하면 WYSIWYG에서 작성한 글의 내용에 대한 미리보기를 할 수 있다.

토스트 UI 적용 화면
토스트 UI 적용 화면

반응형

댓글