섬머노트(summernote)

# 섬머노트

오픈소스 이지윅 에디터

 

# 다운 가능한 사이트

https://summernote.org/

Summernote - Super Simple WYSIWYG editor

 

# 간단하게 적용해보기 (테스트에는 이클립스 스크링 레거시 프로젝트를 이용하였습니다)

1. 섬머노트 홈페이지에서 상단 중앙 부근에 있는 아래 화살표 버튼을 클릭하면 소스를 다운 받을 수 있다.

2. 압축 해제하여 css, js 파일과 font 디렉토리를 프로젝트내에 복사한다. (아래 예시 참고)

bs4는 bootstrap4 버전을 위한 파일이고, lite는 따로 확인이 필요하다.

 

3. 테스트용으로 jsp 파일을 하나 생성하고 css, js들을 포함시켜 준다.

 * 해당 글에서는 summernote.min.css, summernote.min.js, summernote-ko-KR.min.js 파일과 bootstrap 3.4.1버전을 사용하였다.

4. body에 div와 script를 작성해서 불러온다. (아래 참고)

 * 급히 적느라 별도 소스코드용으로 추가하지 못하였다..

5. 결과

정상적으로 출력되며 아이콘 설명도 한글로 출력되는 것을 확인할 수 있다.

추가로 해당 에디터에서 작성한 데이터를 저장하는 것을 작성해서 처리 해야겠다.

 

# bootstrap 4 사용 시 아래 참고

https://summernote.org/getting-started