[Spring] Smart Editor
programming/spring

[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
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