[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"방식은  아래의 <script> 태그를 복사하여 에디터를 적용하고자 하는 파일(html, jsp 등)에 삽입해주기만 하면 됩니다.

 

 저는 CDN방식을 사용할 것입니다. "copy"버튼을 눌러서 <script> 코드를 복사해줍니다.

 

 

 goodsEnroll.jsp 상단에 복사한 <script> 태그를 삽입해줍니다.

 

그림 1-6

 

2. 에디터 적용

 

 <textarea> 태그를 대상으로 Javascript 코드를 통해 CKEditor 에디터를 적용합니다.

 

 '책 소개', '책 목차'에 있는 기존의 <input> 태그를 아래의 <textarea> 태그로 변경합니다.

 

<textarea name="bookIntro" id="bookIntro_textarea"></textarea>
<textarea name="bookContents" id="bookContents_textarea"></textarea>

 

그림 2-1

 

 <textarea>에 CKEditor5를 적용시키기 위한 기본적 JS코드는 아래와 같습니다. 

 

	ClassicEditor
		.create(document.querySelector('적용대상 선택자'))
		.catch(error=>{
			console.error(error);
		});

 

 '책 소개', '책 목차' 입력란에 에디터를 적용시키기 위해 아래의 코드를 추가하였습니다.

 

/* 위지윅 적용 */
 
	/* 책 소개 */
	ClassicEditor
		.create(document.querySelector('#bookIntro_textarea'))
		.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/features/toolbar/toolbar.html

 

3. 테스트

 에디터를 적용한 입력란에 데이터를 입력한 뒤에 '상품등록' 기능을 실행하면 정상적으로 데이터가 등록되는지 확인합니다. 더불어 DB에 에디터가 변환한 데이터가 저장되었는지 확인합니다.

 

그림 3-1

 

그림 3-2

 

그림 3-3

 

 

 

 

REFERENCE

• ko.wikipedia.org/wiki/%EC%9C%84%EC%A7%80%EC%9C%84%EA%B7%B8
• namu.wiki/w/WYSIWYG
• medium.com/ufofactory-org/wysiwyg-%EC%97%90%EB%94%94%ED%84%B0-%EB%B9%84%EA%B5%90-f949f57633a6

DATE

• 2020.03.24