summernote - 에디터 라이브러리

0. 라이브러리 선택 기준

기존 다른 editor 라이브러리를 사용하고 있었는데 

불필요한 기능들이 많고 모바일뷰에서 적합하지 않아서 새로운 무료 라이브러리를 찾아보았다.

 

내 선택 조건은 아래와 같았다.

1. 무료 라이센스
2. 모바일 최적화
3. JSP 환경
4. 많은 기능 필요x
5. 에디터에 사진 넣을 수 있어야함.

 

대부분 에디터 라이브러리가 react, vue 기준이거나 pc 기준인 것이 많았는데

내 조건에 맞는 라이브러리로 summernote를 찾았다.

 

1. 사용방법

1-1. 라이브러리 다운로드 및 적용

다운로드 링크

https://summernote.org/

 

적용 위치

/resources/js/plugins/summernote

 

1-2. Script, link 태그로 불러오기

<script src="/resources/js/plugins/summernote/summernote-lite.js"></script>
<script src="/resources/js/plugins/summernote/summernote-ko-KR.js"></script>
<link rel="stylesheet" href="/resources/js/plugins/summernote/summernote-lite.css">

 

1-3. Html 작성

form 없이 썸머노트를 사용하려면 div에 적용시키면 된다.

<div id="summernote"></div>

 

form을 사용하는 경우 div에 적용하는 것보다  textarea에 적용하는 게 좋다.

또한 썸머노트의 값이 잘릴 수 있으므로 post를 사용해야한다.

<form method="post">
  <textarea id="summernote" name="editordata"></textarea>
</form>

 

1-4. Script 코드 작성 (초기화 코드)

$('#summernote').summernote({
        height: 300,
        minHeight: null,
        maxHeight: null,
        focus: true,
        lang: 'ko-KR',
        placeholder: '내용을 입력해주세요.',
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['table', ['table']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link', 'picture']],
            ['view', ['codeview']]  // HTML 코드 보기 버튼
          ],
          codeviewFilter: true,
          codeviewIframeFilter: true
    });

 

1-5. 한글 폰트 적용

*한글 폰트 적용 (폰트 별도 다운로드 필요) summernote/font에 넣으면 된다.

toolbar: [
    ['fontname', ['fontname']],
    ['fontsize', ['fontsize']]
]

fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New','맑은 고딕','궁서','굴림체','굴림','돋움체','바탕체'],
fontSizes: ['8','9','10','11','12','14','16','18','20','22','24','28','30','36','50','72'],

 

1-6. 내용 가져오기

$('#summernote').summernote('code');

 

2. 적용화면