1. 개요 및 개발환경

개요

 

본 문서는 중급자 이상인 독자들에게 맞추어져 있습니다. 입문자나 초급자인 경우 문서를 이해하는데 다소 어려움이 있을 것 같습니다. 개발환경에서 언급한 것 같이 기본적으로 javascript, jQuery, 서버페이지(jsp), servlet의 사용 경험이 있어야 합니다. 그러나 초급자분들도 쉽게 이해할 수 있도록 설명을 최대한 자세히 넣도록 하겠습니다.

 

위지윅 에디터에 대한 내용이지만 게시판류의 프로그램처럼 수정, 삭제, 조회, 상세 보기 처리에 대한 부분도 추가되어 있습니다.

 

주요 실행 화면

 

summernote를 이해하기 위해 필요한 내용이 아닌 레이아웃 부분은 최대한 배제하였습니다.

게시물 작성 화면

 

 

게시물 제목 목록 보기

 

 

게시물 작성 결과 화면

 

개발 환경

 

개발 툴 종류	설명
Database	mysql 5.x
Server	Tomcat 8.x
servlet 3.x	파일 업로드시 사용
summernote api	0.8.x
java	1.8.x
IDE tools	eclipse EE(2021-03)
jQuery, bootstrap	summernote의 기본 문법들이 jQuery 문법으로 이루어져있음.

 

• summernote의 가장 큰 특징은 누구나 무료로 사용할 수 있다는것과 bootstrap과 jquery를 사용한 위지윅 에디터라는 것입니다.
• 이미지는 DB에 저장하는 방식(base64)이라 따로 이미지를 업로드하는 방식으로 수정해야 합니다.
• 라이브러리는 http://summernote.org 사이트를 방문하여 관련 라이브러리를 다운로드 받아 설치할 수도 있지만 본 문서에서는 CDN 형태로 사용합니다.

 

 

 

관련 파일 : https://cafe.naver.com/itdocument/8824?boardType=L

summernote를 사용한 위지윅 게시판 코드