스프링(Spring)부트 & 스프링 프레임워크를 활용한 CKEditor4 적용하기

많은 웹 개발자들이 스프링을 활용해서 웹 애플리케이션을 개발합니다. 물론 다른 프레임워크 또는 다른 언어들을 이용해서도 웹 애플리케이션을 만듭니다. 필자는 스프링 프레임워크를 이용해서 웹 애플리케이션을 개발합니다. 그래서 여러 플랫폼 개발을 진행할 때 게시판 구성에 필요한 에디터를 보편적으로 많이들 사용하는 에디터를 선정해 구성합니다. 그 중, CKEditor를 에디터로 선정하여 플랫폼에서 사용할 수 있도록 합니다. 물론 다양한 에디터가 존재하므로 그 중 하나를 선택하여 플랫폼을 구성할 수 있을것입니다. 오늘은 스프링 프레임워크를 활용해 CKEditor4 에디터를 적용해보도록 하겠습니다.

CKEditor4 Builder 사용하기

1. CKEditor4 Builder 접속하기

CKEditor4 Builder 이동

위 'CKEditor4 Builder 이동' 을 눌러 Builder 사이트에 접속해주세요. 접속하면 아래와 같은 화면이 나타납니다. Builder는 CKEditor4 버전을 보다 간편하게 설정하고 설정된 여러 정보가 적용된 에디터4를 다운로드 받을 수 있는 Builder 사이트입니다.

2. Builder 사이트에 접속하자마자 나타나는 Preset을 선택합니다.

Basic : 가장 기본적인 스타일(굵게, 기울임체)과 간단한 텍스트 서식 옵션만 포함합니다. 작은 텍스트 편집 영역과 빠른 입력 필드에 이상적입니다.
Standard : 가장 필수적인 플러그인을 포함하는 사전 설정. 현재 웹 표준에 따라 HTML 콘텐츠를 생성하는데 도움이 되는 W3C 호환 도구가 포함되어 있습니다.
Full : 이전 버전의 CKEditor에서 찾을 수 있는 도구가 포함되어 있습니다. 처음부터 모든 옵션을 원하는 사람에게 이상적입니다. 이 패키지에는 모든 공식 플러그인이 포함되어 있지 않습니다.

필자는 Choose Preset에서 'Full' 타입을 선택하였습니다.

3. 추가로 사용하고자 하는 Plugins를 추가로 설정하고 원하는 Skin도 설정합니다.

Selected plugins와 Available Plugins 항목이 있습니다. 왼쪽에 해당하는 Selected Plugins는 사용하기 위해서 선택된 플러그인 항목이고 오른쪽에 해당하는 Available Plugins는 선택 가능한 플러그인 항목입니다. 오른쪽 항목에서 플러그인 종류를 확인 후 사용하고자 하는 플러그인이 있다면 왼쪽 항목에 해당하는 Selected Plugins 항목으로 옮겨 설정합니다.

필자는 기존 Preset에 설정된 그대로를 유지하며 다음 단계에 해당하는 Skin으로 넘어갑니다.

사용가능한 스킨은 총 9개로 사용 가능합니다.

Moono-Lisa
Kama
Moono
Moono blue
Office 2012
Icy Orange
Minimalist
Flat
N1Theme

4. 에디터에서 사용할 언어를 설정합니다.

왼쪽은 에디터에서 사용할 언어 항목이고, 오른쪽은 선택 언어 항목입니다. 오른쪽 항목에서 원하는 국가에 언어를 선택해 왼쪽으로 옮겨 사용 언어를 설정할 수 있습니다.

5. 여러 항목이 설정된 CKEditor 압축파일을 다운로드 받기 위해서 동의 항목에 체크 후 OS 버전에 해당하는 버튼을 클릭해 다운로드를 진행해주세요.

왼쪽 버튼은 OS( Open Source ) 버전이고, 오른쪽 버튼은 LTS(Long Term Support) 버전입니다. CKEditor4는 LTS만 2028년도까지 유지보수 계획이 있다. 그리고 LTS는 라이센스 키가 필요하기 때문에 간단한 에디터 플러그인을 사용할 수 있도록 OS 버전으로 다운로드를 진행합니다.

6. CKEditor4 압축파일이 다운로드 되었다면 압축 해제 합니다.

CKEditor4 적용하기

1. STS를 실행합니다.

2. 프로젝트 내, static 폴더에 ckeditor 폴더를 복사 + 붙여넣기 합니다.

필자는 static 폴더에 'resources' 폴더를 만들고 압축 해제 한 폴더 내에 있는 ckeditor 폴더를 복사 + 붙여넣기 합니다.

3. 에디터를 설정할 jsp페이지에서 CKEditor를 설정합니다.

<html>
   <head>
      <title>일반게시판</title>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
         <script type="text/javascript" src="/resources/ckeditor/ckeditor.js"></script>
   </head>
   <body>
      <form action="/board/insert" method="post">
         제목 : <input type="text" name="title" /><br/>
         내용 : <textarea name="content" rows="5" cols="10"></textarea>
      </form>
   </body>
   <script type="text/javascript">
   $(function(){
      CKEDITOR.replace("content");
   });
</script>
</html>

CKEditor는 textarea Element 위에 얹어서 사용하는 방식이기 때문에 textarea가 필요합니다. textarea의 name 속성의 값을 설정하면 CKEditor가 설정된 textarea의 모습을 확인할 수 있습니다.

4. 프로젝트를 실행해 적용된 모습을 확인합니다.

@Junesker

저작자표시

'OPEN SOURCE > CKEditor4' 카테고리의 다른 글

[CKEditor4] CKEditor란? (1)	2025.04.01

CKEditor4 Builder 사용하기

1. CKEditor4 Builder 접속하기

2. Builder 사이트에 접속하자마자 나타나는 Preset을 선택합니다.

3. 추가로 사용하고자 하는 Plugins를 추가로 설정하고 원하는 Skin도 설정합니다.

4. 에디터에서 사용할 언어를 설정합니다.

5. 여러 항목이 설정된 CKEditor 압축파일을 다운로드 받기 위해서 동의 항목에 체크 후 OS 버전에 해당하는 버튼을 클릭해 다운로드를 진행해주세요.

6. CKEditor4 압축파일이 다운로드 되었다면 압축 해제 합니다.

CKEditor4 적용하기

1. STS를 실행합니다.

2. 프로젝트 내, static 폴더에 ckeditor 폴더를 복사 + 붙여넣기 합니다.

3. 에디터를 설정할 jsp페이지에서 CKEditor를 설정합니다.

4. 프로젝트를 실행해 적용된 모습을 확인합니다.

'OPEN SOURCE > CKEditor4' 카테고리의 다른 글

티스토리툴바