1. TOAST UI Editor란?
TOAST UI Editor(이하 'TUI 에디터')는 NHN Cloud에서 개발한 오픈 소스 라이브러리로, 마크다운과 위지윅 방식 모두를 지원하는 무료 에디터입니다.
- 마크다운(Markdown) : '일반 텍스트 기반의 경량 마크업 언어'로, 일반적인 텍스트로 서식이 있는 문서를 작성하는 데 사용되는 언어입니다. 마크다운은 brad 님의 글에 잘 정리되어 있으니 한 번쯤은 읽어보시기를 권장드립니다.
- 위지윅(WYSIWYG) : 수동으로 텍스트를 입력하는 문서 작성의 진입장벽을 줄이기 위해 탄생한, GUI로 문서를 작성할 수 있는 도구입니다. 우리가 웹 사이트 게시판에서 흔히 볼 수 있는 에디터가 위지윅 방식의 에디터이며, 대표적인 위지윅 에디터 종류는 gth1123 님의 글에 쉽게 정리되어 있습니다.
TUI 에디터는 디자인도 심플하고, 가이드 문서 또한 잘 정리되어 있기 때문에 타 에디터들에 비해 적용이 가장 쉬웠던, 제 기준에서는 최고로 손꼽는 에디터입니다.
제가 에디터 적용에 참고한 내용들은 아래 세 개 사이트에 있는데요. 에디터 적용 이후에 추가적으로 필요한 기능이 있으시다면 참고해 주시면 되며, 제가 에디터를 적용할 땐, 한글 문서로 친절하게 정리되어 있는 NHN github가 가장 좋았습니다.
2. TOAST UI Editor 적용하기
사이트에 TUI 에디터를 적용하려면, TUI 에디터에서 제공해 주는 JS(JavaScript) 파일과 CSS 파일이 필요한데요. 이때 npm을 통해 소스 코드를 설치하는 방법과, CDN을 통해 소스 코드를 불러오는 방법이 있습니다.
하지만 npm을 통한 설치는 Node.js 환경에서만 가능하고, 이 글에서는 순수 javaScript를 기준으로 설명드리기 때문에 CDN을 통해 소스 코드를 불러오는 방법을 이용합니다.
2-1) JavaScript 소스 코드 불러오기 (CDN)
먼저 js 파일입니다. HTML에서 CDN으로 아래 주소에 있는 파일을 불러와야 JavaScript 코드를 통해 TUI 에디터 객체를 생성할 수 있습니다.
HTML 전체 소스 코드는 2-5를 참고해 주세요.
...
<body>
...
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
</body>
...
2-2) CSS 소스 코드 불러오기 (CDN)
다음은 css 파일입니다. 마찬가지로 에디터에 디자인을 적용하기 위해, HTML에서 CDN으로 파일을 불러와야 합니다.
...
<head>
...
<!-- Editor's Style -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
</head>
...
2-3) <body>에 <div> 태그 선언하기
TUI 에디터는 <div> 태그에 에디터가 생성(적용)되기 때문에, HTML <body> 태그에 <div> 태그를 꼭 선언해 주어야 합니다.
...
<body>
<div id="content"></div>
</body>
...
2-4) 인스턴스 생성하기
마지막으로 new 생성자를 통해 에디터 객체를 생성하면, content라는 id를 가진 <div> 태그에 에디터가 적용됩니다.
...
<body>
...
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<script>
const editor = new toastui.Editor({
el: document.querySelector('#content'), // 에디터를 적용할 요소 (컨테이너)
height: '500px', // 에디터 영역의 높이 값 (OOOpx || auto)
initialEditType: 'markdown', // 최초로 보여줄 에디터 타입 (markdown || wysiwyg)
initialValue: '내용을 입력해 주세요.', // 내용의 초기 값으로, 반드시 마크다운 문자열 형태여야 함
previewStyle: 'vertical' // 마크다운 프리뷰 스타일 (tab || vertical)
});
</script>
</body>
...
2-5) HTML 전체 소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>TOAST UI Editor 적용하기</title>
<!-- TUI 에디터 CSS CDN -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
</head>
<body>
<h2 style="text-align: center;">Hello, TOAST UI Editor!</h2>
<!-- 에디터를 적용할 요소 (컨테이너) -->
<div id="content">
</div>
<!-- TUI 에디터 JS CDN -->
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<script>
const editor = new toastui.Editor({
el: document.querySelector('#content'), // 에디터를 적용할 요소 (컨테이너)
height: '500px', // 에디터 영역의 높이 값 (OOOpx || auto)
initialEditType: 'markdown', // 최초로 보여줄 에디터 타입 (markdown || wysiwyg)
initialValue: '내용을 입력해 주세요.', // 내용의 초기 값으로, 반드시 마크다운 문자열 형태여야 함
previewStyle: 'vertical' // 마크다운 프리뷰 스타일 (tab || vertical)
});
</script>
</body>
</html>
3. TOAST UI Editor 적용 여부 확인 및 데이터 입력해 보기
이제 페이지(HTML)에 접속해 보면, 아래와 같이 TUI 에디터가 잘 적용된 것을 확인하실 수 있습니다. 앞서 말씀드렸듯이, TUI 에디터는 마크다운과 위지윅 두 가지 모드를 사용할 수 있으며, 우측 하단의 탭을 통해 모드를 변경할 수 있습니다.
3-1) 마크다운 모드로 입력하기
먼저, 마크다운 모드로 데이터를 입력해 본 결과입니다. 입력된 마크다운 텍스트는 TUI 에디터 객체의 getMarkdown( ) 함수를 통해 조회할 수 있습니다.
3-2) 위지윅 모드로 입력하기
두 번째는 위지윅 모드로 입력해 본 결과입니다. 마찬가지로 입력된 HTML은 TUI 에디터 객체의 getHTML( ) 함수를 통해 조회할 수 있습니다.
마치며
여기까지, 공식 문서와 깃허브를 참고해서 기본 옵션으로 TUI 에디터를 적용해 보았습니다. 오늘 적용한 에디터에는 보완해야 할 점이 대표적으로 두 가지가 있습니다.
- 에디터에 입력한 내용을 데이터베이스(Database)에 저장하기
- 이미지 업로드 시, 파일 정보가 base64라는 방식으로 인코딩(암호화) 되는데, 이때 에디터의 내용이 적게는 1,000 단위에서 길게는 10,000 ~ 100,000 단위까지 길어질 수 있으므로 파일을 디스크에 따로 저장하기
2번은 '마크다운 모드로 입력하기'의 콘텐츠 입력 결과 이미지 좌측의 긴 문자열과 관련된 이슈인데요. 제가 업로드한 이미지의 크기는 70KB인데, 이를 업로드했을 때, 무려 94589자의 문자열이 삽입되었습니다.
다음 글에서는 1번과 2번 이슈를 해결해 볼 건데요. 스프링 부트와 H2 DB를 이용해서, 에디터에 업로드된 이미지와 에디터에 입력된 내용을 관리하는 방법을 알아보도록 하겠습니다.
오늘도 방문해 주셔서 감사드립니다. 좋은 하루 보내세요 :)
'Open-source > Editor' 카테고리의 다른 글
| [TOAST UI Editor] - 이미지 업로드(Image upload) 개선하기 & 데이터베이스(Database)에 에디터 내용 저장 및 불러오기 (17) | 2023.08.01 |
|---|
댓글