on
[Spring][쇼핑몰 프로젝트][18] 상품 등록 - 위지윅(wysiwyg) 에디터 적용
[Spring][쇼핑몰 프로젝트][18] 상품 등록 - 위지윅(wysiwyg) 에디터 적용
반응형
프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188
목표
'책 소개', '책 목차' 입력란 위지윅 에디터 적용
위지윅(WYSYWYG) 에디터란 쉽게 말해 일반적인 사용자가 코드를 몰라도 눈에 보이는 대로 작성할 수 있도록, 문서 작성 방법을 GUI로 구현한 도구(Tool)입니다. 우리는 흔히 위지윅을 많이 사용하고 있습니다. 예를 들어 '한글'프로그램에 문서를 작성한다던지, 웹카페나 블로그에 글을 쓸 때 사용되는 것이 모두 '위지윅 에디터'를 사용하는 것입니다.
위지윅을 사용하지 않게 된다면 아래그림에 작성된 문서를 작성하기 위해서
그림 0-1
사용자는 아래와 같이 코드를 직접 입력 해주어야 합니다.
그림 0-2
이번 포스팅에선 '책 소개', '책 목차' 입력란에 자바스크립트 기반 위지윅 에디터를 적용하는 것을 목표로 합니다. 무료로 사용할 수 있는 자바스크립트 기반 위지윅 에디터는 "CK Editor", "TinyMCE", "Toast Editor", "Summernote" 등 이 있습니다.
저는 CK Editor에서도 "CKEditor5"을 적용 시키고자 합니다.
순서
1. 사용준비
2. 에디터 적용
1. 사용 준비
먼저 CKEditor 홈페이지로 접속합니다.
ckeditor.com/
그림 1-1
휠을 조금 내려보면 CKEditor5 소개란이 있습니다. 그중 "CKEditor 5 overvicew" 버튼을 클릭합니다.
그림 1-2
화면 오른쪽 상단 "Download"를 클릭합니다.
그림 1-3
이동된 화면에서 첫 번째 목록 글을 보면 '1. Choose your buid' 글이 보입니다. 자신이 원하는 스타일의 에디터를 선택할 수 있습니다. 저는 그냥 기본인 Classic을 사용하였습니다.
그림 1-4
휠을 조금 내려보면 다운로드할 수 3가지 방식을 제공하고 있습니다. 첫 번째 방식인 "Command line"은 Node.js를 사용할 경우 사용할 수 있습니다. 두 번째 방식인 "Zip package"경우 'CKEditor5' 라이브러리 파일들을 다운로드하여서 프로젝트에 직접 넣어 주는 방법입니다. 세 번째 방식 "CDN"방식은 아래의
저는 CDN방식을 사용할 것입니다. "copy"버튼을 눌러서
goodsEnroll.jsp 상단에 복사한
그림 1-6
2. 에디터 적용
태그를 대상으로 Javascript 코드를 통해 CKEditor 에디터를 적용합니다.
'책 소개', '책 목차'에 있는 기존의 태그를 아래의 태그로 변경합니다.
그림 2-1
에 CKEditor5를 적용시키기 위한 기본적 JS코드는 아래와 같습니다.
ClassicEditor .create(document.querySelector('적용대상 선택자')) .catch(error=>{ console.error(error); });
'책 소개', '책 목차' 입력란에 에디터를 적용시키기 위해 아래의 코드를 추가하였습니다.
/* 위지윅 적용 */ /* 책 소개 */ ClassicEditor .create(document.querySelector('#bookIntro_textarea'),config) .catch(error=>{ console.error(error); }); /* 책 목차 */ ClassicEditor .create(document.querySelector('#bookContents_textarea')) .catch(error=>{ console.error(error); });
그림 2-2
서버를 구동시켜 '상품 등록' 페이지로 들어가 보면 에디터가 적용되었음을 확인할 수 있습니다.
그림 2-3
입력란 높이가 낮아서 이를 높여주기 위해 goddsEnroll.css 파일에 아래의 css 설정을 추가해주었습니다.
.ck-content { /* ckeditor 높이 */ height: 170px; }
그림 2-4
그림 2-5
※ CKEditor는 원하는 기능들만 사용할 수 있도록 커스터마이징 할 수 있습니다. 아래의 CKEditor 홈페이지를 참고하시거나 검색을 통해 참고하셔서 수정해주시면 됩니다.
ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html
3. 테스트
에디터를 적용한 입력란에 데이터를 입력한 뒤에 '상품등록' 기능을 실행하면 정상적으로 데이터가 등록되는지 확인합니다. 더불어 DB에 에디터가 변환한 데이터가 저장되었는지 확인합니다.
그림 3-1
그림 3-2
그림 3-3
REFERENCE
DATE
2020.03.24
반응형
from http://kimvampa.tistory.com/193 by ccl(A) rewrite - 2021-03-24 10:27:04