[Spring] Smart Editor

12. Smart Editor

12.1 Smart Editor

WYSIWYG Editor(위지윅 에디터, what you see is what you get)

- 사용자가 현재 화면에서 보고 있는 내용과 동일한 html code를 생성하는 에디터

- 네이버, 다음 에디터, CKEditor, SummerNote 등

12.2 CKEditor

- http://ckeditor.com

- 2018년 2월 현재 CKEditor 5 버전이 최신 버전이지만 아직 alpha 버전이고 한글 지원이 잘 되지 않아서 안정화된 버전인 CKEditor 4.8 버전으로 실습함

- 이미지 업로드를 위해서는 별도의 작업이 필요함

- 적용 예

게시물 작성

ckeditor 홈페이지에서 Download

다운로드 주소 : https://ckeditor.com/ckeditor-4/download/

Standard Package 다운로드

다운로드 후 압축을 풀고 ckeditor 디렉토리를 views에 붙임

12.3 ckeditor 실습예제

12.3.1 servlet-context.xml에 리소스 매핑 추가

12.3.2 ckeditor.js 참조

12.3.3 ckeditor를 적용할 태그에 작성

12.3.4 upload.ImageUploadController.java

12.4 SummerNote

- http://summernote.org

- 이미지를 텍스트 형식으로 저장함

- 적용 예

summer note download

압축 해제 후 dist 디렉토리를 views에 붙이고 이름을 summernote로 변경

12.5 summernote 실습 예제

12.5.1 servlet-context.xml에 리소스 매핑 추가

12.5.2 product_write.jsp