https://youtu.be/BYwLIKxMZS8?si=7hNxKV_VyOuK42cC

스프링 부트 CKEditor 7 - 다운로드(로컬) 방식 추가 방법

스프링 부트 CKEditor 7 - 다운로드(로컬) 방식 추가 방법

Spring Boot + CKEditor 5 : 다운로드 방식(Custom Build)으로 에디터 적용하기

이번 글에서는 CKEditor 5를 CDN이 아닌 “다운로드 방식”으로 프로젝트에 직접 포함하는 방법을 정리한다.

핵심은 단순하다.

“에디터를 외부에서 가져오는 게 아니라, 내 프로젝트 안에서 직접 관리한다”

1. CDN vs 다운로드 방식 다시 정리

이전 글에서 CDN 방식을 사용했다면, 이번에는 반대 개념이다.

CDN 방식

외부 서버에서 로드
빠르게 적용 가능
유지보수 쉬움

👉 단점

외부 의존성 존재
커스터마이징 제한

다운로드 방식 (이번 글)

프로젝트 내부에 CKEditor 포함
완전한 커스터마이징 가능

👉 장점

플러그인 자유롭게 구성
외부 장애 영향 없음
기업 서비스에서 선호

👉 결론:

“실무에서는 대부분 다운로드(Custom Build) 방식 사용”

2. CKEditor 5 Custom Build 다운로드

이 단계가 가장 중요하다.

1) CKEditor 공식 사이트 접속

👉 Custom Build 기능 사용

2) 에디터 타입 선택

Classic Editor 선택 (권장)

👉 이유:

문서 기반 UI에 적합
대부분 튜토리얼과 동일 구조

3) 플러그인 선택

예시:

Bold
Italic
Image Upload
Alignment

주의사항

👉 ⭐ 표시 플러그인 = 유료 기능

무료 실습 시 제외

4) 툴바 구성

드래그로 순서 변경
필요 없는 기능 제거 가능

5) 언어 설정

👉 반드시 설정

Korean 선택

6) 빌드 및 다운로드

“Start” 클릭
약 5~6분 소요
ZIP 파일 다운로드

3. 프로젝트에 CKEditor 파일 추가

이제 다운로드한 파일을 프로젝트에 넣는다.

1) 압축 해제

원하는 위치에 압축 해제

2) Spring Boot 경로

src/main/resources/static

3) js 폴더 생성

static/js

4) CKEditor 파일 이동

static/js/ckeditor/

👉 핵심 파일:

ckeditor.js

구조 예시

static
 └─ js
     └─ ckeditor
         └─ build
             └─ ckeditor.js

👉 static 폴더는 웹에서 직접 접근 가능

4. HTML에서 CKEditor 적용

이제 기존 CDN 코드를 제거하고 👉 로컬 파일을 사용한다.

1) 기존 CDN 제거

<!-- 삭제 -->
<script src="https://cdn.ckeditor.com/..."></script>

2) 로컬 스크립트 추가

<script src="/js/ckeditor/build/ckeditor.js"></script>

중요한 포인트

👉 static은 경로에서 제외

❌ /static/js/...
✅ /js/...

5. CKEditor 초기화 코드

이제 textarea에 에디터를 적용한다.

HTML

<textarea id="content" name="content"></textarea>

JavaScript

<script>
    ClassicEditor
        .create(document.querySelector('#content'), {
            language: 'ko'
        })
        .catch(error => {
            console.error(error);
        });
</script>

핵심 포인트

id 값 반드시 일치
language 설정으로 한글 적용

6. 실행 결과 확인

서버 실행 후:

http://localhost:8080/editor

정상 결과

CKEditor UI 표시
툴바 활성화
한글 정상 출력
플러그인 적용 확인

7. CDN vs 다운로드 방식 핵심 차이

항목	CDN	다운로드
속도	빠름	초기 느림
설정	간단	복잡
커스터마이징	제한	자유
안정성	외부 의존	내부 관리

8. 실무에서 중요한 포인트

이 단계부터는 “개발자 레벨 차이”가 난다.

1. Custom Build = 기능 설계

어떤 기능을 넣을지 직접 결정
에디터 자체를 하나의 서비스로 본다

2. static 구조 이해

static = 웹 루트

👉 CDN과 다르게 직접 서빙

3. 에디터도 프론트 자산

JS 번들
빌드 관리 필요

4. 보안 고려

HTML 데이터 그대로 저장됨
XSS 방어 필요

9. 다음 단계

이제 진짜 중요한 단계로 간다.

다음 작업

/save Controller 구현
CKEditor 데이터 서버 전달
DB 저장
게시글 조회

정리

이번 글의 핵심은 한 줄이다.

다운로드 방식은 “에디터를 내 서비스의 일부로 만드는 과정”이다

핵심 요약

Custom Build로 CKEditor 생성
static/js 경로에 추가
CDN 제거 후 로컬 스크립트 사용
textarea에 JS로 적용
커스터마이징 가능