최근 JSP/Servlet을 활용하여 CRUD를 구현하는 프로젝트를 진행하다가 텍스트 입력을 블로그처럼 에디터로 구현할 방법은 없을까?라는 궁금증에 구글 검색을 하다가 알게 된 서머 노트(Summernote) 사용법에 대해 알아보려고 한다. 그리고 프로젝트에 어떻게 적용했는지 하나씩 기록하고자 한다. (해당 글에서는 간단한 구현단계까지만 기록할 예정이다.)
시작하기에 앞서 이런 웹에디터는 썸머노트 말고도 많이 존재한다. 대표적으로 네이버에서 사용하는 스마트 에디터 2.0 , 그리고 CkEditor 등이 있다. 현재 네이버는 스마트 에디터 3.0을 사용하고 있지만, 오픈된 api는 2.0까지 되어 있다고 한다. 나중에 다른 에디터들도 사용해 보고 싶지만 우선 제일 먼저 알게 된 서머 노트부터 알아보자.
1. 썸머노트 공식 사이트 접속하기
우선 아래에 썸머노트 공식 사이트에 접속하면 실제로 적용된 에디터를 사용해 볼 수 있다. 공식문서도 확인할 수 있으니 필요한 기능이 있다면 찾아서 활용해 보는 것도 좋다. 또한 서머 노트는 부트스트랩 기반으로 개발된 에디터라고 한다. 깔끔한 디자인이고 사용성도 좋아 많이 사용된다고 한다.
Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
summernote.org
2. 프로젝트에 썸머노트 Javascript / css 적용하기
공식 페이지에 접속한 후 상단에 Getting started 메뉴를 누르면 아래와 같이 화면이 나온다. 여기서 js와 css를 다운로드하여 사용할 수 있다. 개인적으로 진행했던 프로젝트에서는 다운로드하여서 원하는 버전으로 사용했다. 공식 문서에 따르면 서머 노트는 부트스트랩 3 또는 4 버전의 서머 노트는 Open Source라이브러리 jQuery 및 부트스트랩을 사용하고, Lite 버전은 jQuery만 사용한다고 한다.
하지만 조금 아래로 내리면 CDN형식으로 적용할 수 있는 소스코드가 있다. 구현 예제코드에서는 해당 소스를 복사하여 사용하려고 한다. 우선 아래 소스코드를 복사해준다. 조금 더 밑으로 내려보면 부트스트랩 4 버전/ 부트스트랩 5 버전 / Lite 버전의 CDN형식의 예제 코드가 있으니 버전에 맞는 걸 활용하면 된다.
3. 프로젝트에 썸머노트 적용하기
우선 복사한 코드를 <head> </head> 사이에 아래와 같이 붙여 넣기 해준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<title>썸머노트 예제</title>
</head>
위와 같이 적용하고 난 후 아래와 같이 html 코드를 작성해준다. 기본적으로 썸머노트를 불러오는 방식은 <div>와 <textarea> 두 가지가 있다고 한다. 아래 예제에서는 <textarea> 태그를 사용하였다. 만약 <div> 태그를 사용한다면 id값만 맞춰주면 된다.
<div class="container">
<h2>글작성</h2>
<form method="post" action="">
<input id="subject" name="subject" placeholder="제목을 입력해주세요">
<textarea id="contents" name="contents"></textarea>
</form>
</div>
이렇게만 작성하고 끝내면 적용이 되지 않는다. 그래서 아래와 같은 스크립트를 추가해주어야 한다. jQuery를 이용해 작성했다. width 값과 height값을 지정할 수 있고, placeholder로 지정이 가능하다. 이외에도 많은 옵션들을 적용할 수 있다. 공식 페이지에서 Deep dive 메뉴에서 확인 가능하니 공식 문서를 참고하자.
$(function () {
$("#contents").summernote({
width: 500, //가로값 설정
height: 300, // 높이값 설정
placeholder: "내용을 입력해주세요" //안내문구 설정
});
});
아래는 적용화면이다. 폰트 크기, 스타일, 색상, 표 그리기, 이미지 업로드, 링크 연결 등 다양한 옵션 기능들이 있다.
다만, 이미지 업로드시 기본 이미지 저장 방식이 base64로 변환하기 때문에 소스코드 길이가 어마어마하게 길어지고, DB에 데이터를 저장을 하기에도 부담이 크다. 그래서 이미지 같은 경우 커스템 해야 하는 부분이 있다. 또한, 동영상도 업로드되는 방식이 아닌 링크를 거는 방식이다. 이 부분도 커스텀이 필요한 부분이다.
4. 썸머노트 에디터 툴바 변경하기
위와 같이 기본 툴바로 사용해도 되지만 서머 노트는 툴바를 커스텀할 수 있다. 해당 내용은 공식 사이트에서 Deep dive 메뉴를 클릭하면 상단에 자세하게 기재되어 있다.
위 코드를 복사하여 아래와 같이 몇가지 기능을 커스텀하여 추가해 보았다.
$(function () {
$("#contents").summernote({
width:900, //가로값 설정
height: 400, // 높이값 설정]
placeholder: "내용을 입력해주세요", //안내 문구
focus: true, // 초기화 후 커서가 편집 가능한 영역에 포커스를 맞춤
lang: 'ko-KR', //한글 설정, 기본값은 'en-US'
toolbar: [
//[groupName, [list of button]],
['insert', ['picture']],
['fontsize', ['fontsize']],
['fontName', ['fontname']],
['style', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
['color', ['forecolor', 'backcolor']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
]
});
});
그 결과 툴바가 변경될 걸 확인 할 수 있다. 공식 사이트에서도 자세히 설명되어 있으니 자신이 원하는 기능으로 커스텀 하고 싶다면 위와 같이 적용하는 것도 좋을 것 같다.
5. 그외 옵션 기능
$('#contents').summernote({
minHeight : null, //최소 높이
maxHeight : null, //최대 높이
fontNames: ['맑은 고딕', '궁서', '굴림'], //사용자 정의 글꼴
fontSize: ['10', '12', '14', '16', '18' , '20' , '24'], //사용자 정의 사이즈
lineHeights: ['1.0', '1.2', '1.4'], //사용자 정의 줄간격
disableDragAndDrop : true, //드래그 앤 드롭 비활성화
shortcuts: false, //단축키 비활성화
tabDisable: false //탭 비활성화
});
이 외에도 많은 기능이 있어 사용이 가능하다. 자세한 내용은 공식 사이트를 확인하면 자세히 설명되어 있으니 활용만 잘해주면 쓸만한 웹에디터를 만들 수 있다.
