textarea 태그에 summernote 에디터 사용하기

설정 환경 : Spring Boot, thymeleaf, bootstrap 5 버전, jquery 3버전

 

1. summernote js 및 css 파일 다운로드

아래 주소에서 Download compiled 를 클릭하여 다운로드 받는다.

https://summernote.org/getting-started/#clone-or-fork-via-github

Summernote - Super Simple WYSIWYG editor

 

2. js 및 css 파일 설정

다운받고 압축 푼 폴더에서 아래 파일을 Spring Boot 프로젝트에 넣는다.

 

본인은 Bootstrap 5 버전이여서 summernote bs5 버전을 먼저 해봤으나 버전차이 때문인지

에러사항이 많아 lite 버전으로 변경했다.

 

사용할 html 파일에 아래와 같이 js 및 css 를 추가한다.

 

.note-modal-backdrop{ display: none !important;}

해당 Class 는 summernote에서 toolbar 기능 중 dialog 를 띄웠을 때 

백그라운드로 검은화면을 제거하기 위해 설정했다.

찾아보니 아직 해결되지 않은 문제 같아서 개인적으로 display none 으로 처리했다.

 

.note-btn.dropdown-toggle:after { content: none; }

summernote 의 toolbar 기능에서 dropdown 으로 보여지는 곳에서 화살표 방향이

2개로 보이는 현상을 제거하기 위해 설정했다.

 

bootstrap.bundle.min.js

해당 js 파일은 summernote bs5 버전을 설정했을 때 bootstrap 5 에서 존재하지 않는

함수를 호출하여 에러가 발생했다. 해당 에러를 해결하기 위해 bundle.min.js 를

추가했으므로 추가하지 않아도 된다.

 

3. summernote 설정

아래와 같이 html document.ready 에 설정정보를 추가해준다.

$(document).ready(function(){
    $('#summernote').summernote({
        height: 300,                 // 에디터 높이
        minHeight: null,             // 최소 높이
        maxHeight: null,             // 최대 높이
        focus: true,                  // 에디터 로딩후 포커스를 맞출지 여부
        lang: "ko-KR", // 한글 설정
        placeholder: '', //placeholder 설정
        toolbar: [
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video']],
            ['view', ['codeview']]
        ],
        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'] 
    });
});

 

아래는 html 내용이다. form 태그에 summernote 를 설정했으므로 div 태그가 아닌 textarea 태그 자체에 설정했다.