스프링 부트 CKEditor
스프링 부트 CKEditor 6 - CDN 방식 추가 방법
카테고리 : 개발자 유미
https://youtu.be/i-4qbA8upiY?si=5_g-XT2F3iBRnUaq
스프링 부트 CKEditor 6 - CDN 방식 추가 방법
- 스프링 부트 CKEditor 6 - CDN 방식 추가 방법
Spring Boot + CKEditor 5 : CDN 방식으로 빠르게 에디터 적용하기
이번 글에서는 Spring Boot 프로젝트에 CKEditor 5를 가장 빠르게 적용하는 방법, 👉 CDN 방식으로 에디터를 붙이는 방법을 정리한다.
핵심은 단순하다.
파일 다운로드 없이, script 한 줄로 에디터를 붙인다
1. CKEditor 추가 방식 2가지
CKEditor를 프로젝트에 넣는 방식은 크게 두 가지다.
1) CDN 방식 (이번 글에서 사용)
<script src="https://cdn.ckeditor.com/..."></script>
특징
- 설치 필요 없음
- 빠르게 적용 가능
- 유지보수 편함
단점
- CDN 서버 장애 시 영향 가능
2) 직접 다운로드 방식
- CKEditor 파일을 프로젝트에 포함
- 서버에서 직접 제공
특징
- 외부 의존성 없음
- 커스터마이징 가능
단점
- 설정 복잡
- 유지보수 부담
👉 결론:
실습 / 빠른 개발 → CDN 운영 / 커스터마이징 → 다운로드 방식
2. CKEditor 5 CDN 적용 방법
이제 실제로 적용해보자.
1) CDN 스크립트 추가
에디터를 사용할 HTML 파일 (editor.html)의 <head> 영역에 추가한다.
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
2) 한글 지원 추가 (중요)
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/translations/ko.js"></script>
👉 이 두 개가 핵심이다.
- 첫 번째: 에디터 기능
- 두 번째: 한글 지원
3. CKEditor를 textarea에 적용하기
이제 “진짜 중요한 단계”다.
textarea → CKEditor로 변환
기존 HTML
<textarea id="content" name="content"></textarea>
JavaScript 추가
<script>
ClassicEditor
.create(document.querySelector('#content'), {
language: 'ko'
})
.catch(error => {
console.error(error);
});
</script>
핵심 포인트
document.querySelector('#content')
👉 의미:
- id=”content”인 textarea 선택
- 그 위에 CKEditor 적용
4. 전체 코드 구조
정리하면 이렇게 된다.
editor.html
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<!-- CKEditor CDN -->
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/translations/ko.js"></script>
</head>
<body>
<form action="/save" method="post">
<input type="text" name="title" placeholder="제목">
<textarea id="content" name="content"></textarea>
<button type="submit">등록</button>
</form>
<script>
ClassicEditor
.create(document.querySelector('#content'), {
language: 'ko'
})
.catch(error => {
console.error(error);
});
</script>
</body>
</html>
5. 실행 결과
이제 서버 실행 후:
http://localhost:8080/editor
결과 화면
- textarea 사라짐
- CKEditor UI 표시
- 툴바 활성화
- 한글 정상 출력
👉 성공
6. 자주 하는 실수
1) id mismatch
<textarea id="content">
document.querySelector('#content')
👉 둘이 다르면 에디터 안 붙음
2) script 위치 문제
👉 script는 보통 body 하단에 두는 것이 안전
3) CDN 버전 불일치
- ckeditor.js 버전
- translations 버전
👉 반드시 동일 버전 사용
4) 한글 깨짐
👉 language: ‘ko’ 설정 누락
7. 실무 관점에서 중요한 포인트
이 단계에서 중요한 건 단순 적용이 아니다.
1. 에디터는 UI일 뿐
- 데이터 저장 책임 없음
- 서버에서 처리해야 함
2. textarea 값이 실제 데이터
👉 서버로 넘어가는 건 HTML 문자열
<p>내용</p>
3. 보안 고려 필요
- XSS 공격 가능성
- HTML sanitize 필요
8. 다음 단계에서 할 것
이제 진짜 중요한 로직으로 넘어간다.
다음 작업
- /save Controller 구현
- CKEditor 데이터 DB 저장
- 게시글 조회
- HTML 렌더링 처리
정리
이번 글의 핵심은 한 줄이다.
CKEditor는 textarea를 “리치 텍스트 UI”로 바꿔주는 도구일 뿐이다
핵심 요약
- CDN으로 빠르게 적용 가능
- textarea 기반 구조 유지
- JS로 editor 초기화
- 데이터는 HTML 형태로 전달
