Spring 블로그 만들기 - 14. 위지윅 에디터 사용하기(CKEditor5)

이 포스팅의 샘플 게시판 개발 환경은 MAC OS, STS, OpenJDK11 입니다.

블로그 만들기 - 14. 위지윅 에디터 사용하기(CKEditor5)

이번에는 게시판을 조금 업그레이드 해보려고 합니다. 현재 게시판은 단순히 textarea로 이루어져 글자의 폰트나 크기, 색상 등 쉽게 바꿀 수 있는 환경이 아닙니다. 위지윅 에디터는 한글이나 워드를 사용하는 것과 같이 쉽게 이러한 작업을 할 수 있게 도와주는 프로그램 입니다. 무료로 사용할 수 있는 위지윅 프로그램이 몇 가지 있지만, 여기서는 CKEditor5 를 가지고 다뤄 보려 합니다.

CKEditor을 사용방법에는 크게 2가지가 있습니다. 하나는 CDN 방식을 이용하는 방식과 다른 하나는 CKEditor을 다운로드 받아 사용하는 방법입니다. 여기에서는 CDN방식을 이용하여 CKEditor을 사용해 보도록 하겠습니다.

CKEditor5 링크걸기

CKEditor 공식 홈페이지의 주소는 아래와 같습니다

https://ckeditor.com

스크롤을 조금만 아래로 내려보면 CKEditor4와 CKEditor5에 대한 안내 링크가 보입니다.

CKEditor5의 [Overview] 버튼을 클릭합니다.

CKEditor5에 대한 제품 설명 페이지로 이동됩니다. CKEditor5 페이지 우측 상단에 보면 많은 메뉴가 보입니다. 이중에 [Download] 버튼을 클릭 합니다.

가장 먼저 할일은 CKEditor5를 어떤 방식으로 사용할 것인지 CKEditor 모드를 선택 해야 합니다.

여기서는 가장 기본적인 Classic 를 사용할 것이기 때문에 다음 단계로 넘어 가도록 하겠습니다. 다음 단계는 스크롤을 조금 아래로 내리면 나타납니다.

두번째 단계는 CKEditor을 어떻게 사용할 지에 대해 나옵니다.

2번째 방식은 CKEditor 소스를 다운로드 받아 로컬 디렉토리에 소스를 올리는 것이고 3번 CDN 방식은 CKEditor의 주소만 링크를 걸어 사용하는 방식입니다. 여기서는 CDN 방식을 이용하기로 하였으므로 텍스트 창에 있는 주소를 복사합니다.

화면 수정하기

게시글 입력 화면에 CKEditor을 사용하기 위해 boardForm.jsp를 수정해야 합니다. 스크립트 상단에 조금 전에 위에서 복사 하였던 CDN 코드를 아래와 같은 코드를 입력합니다.

<script src="https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js"></script>

그리고 페이지의 가장 마지막 하단에 아래와 같이 코드를 입력합니다. 이 부분은 CKEditor이 적용 될 수 있도록 CKEditor의 설정을 저장한 자바스크립트 파일을 호출하는 부분입니다. 이 코드는 항상 textarea보다 나중에 와야 합니다.

<script src="${pageContext.request.contextPath}/resources/common/js/ckeditor.js"></script>

CKEditor의 설정관련 파일을 아래와 같이 만듭니다.

ckeditor.js의 내용은 아래와 같습니다.

ckeditor.js

ClassicEditor 

    .create( document.querySelector( ‘#content' ) ) 

    .then( editor => { 

        console.log( editor ); 

    } ) 

    .catch( error => { 

        console.error( error ); 

    } );

붉은색 표시 부분은 textarea의 ID를 가리킵니다. 이렇게 하면 가장 기본적인 class 버전의 CKEditor 이 적용됩니다.

글쓰기 페이지로 접속하여 테스트를 해봅니다.

깔끔한 입력 폼으로 변경되었습니다. 다른 포털사이트 처럼 멋진 글쓰기가 가능해졌습니다.

[저장] 버튼을 클릭하여 입력한 내용이 제대로 저장되고 보여 지는지 상세페이지를 확인해 봅니다.

블로그 만들기 포스팅 리스트

1. Spring 블로그 만들기 - 1. 프로젝트 생성 및 character encoding setting
2. Spring 블로그 만들기 - 2. DB 셋팅 및 접속 테스트 Part.1
3. Spring 블로그 만들기 - 2. DB 셋팅 및 접속 테스트 Part.2
4. Spring 블로그 만들기 - 3. 게시판 리스트 화면 만들기
5. Spring 블로그 만들기 - 4. 글쓰기 화면 만들기
6. Spring 블로그 만들기 - 5. 상세조회 화면 만들기
7. Spring 블로그 만들기 - 6. 수정 및 삭제
8. Spring 블로그 만들기 - 7. 예외 처리
9. Spring 블로그 만들기 - 8. 트랜젝션 처리
10. Spring 블로그 만들기 - 9. 페이징(pagination)
11. Spring 블로그 만들기 - 10. 게시물 검색(search)
12. Spring 블로그 만들기 - 11. Properties 사용하기
13. Spring 블로그 만들기 - 12. 댓글 리스트
14. Spring 블로그 만들기 - 13. 댓글 쓰기/수정/삭제
15. Spring 블로그 만들기 - 14. 위지윅 에디터 사용하기(CKEditor5)
16. Spring 블로그 만들기 - 15. 상단 메뉴바 만들기(부트스트랩)
17. Spring 블로그 만들기 - 16. 게시판 메뉴 관리
18. Spring 블로그 만들기 - 17. 로그인 화면 만들기 및 레이아웃 나누기
19. Spring 블로그 만들기 - 18. 회원가입 및 관리

 

※ 포스팅에 오타나 잘못된 부분, 추가적으로 더 알고 싶은 부분이 있으면 댓글 주세요~