🖼️ CKEditor5를 Spring Boot에 적용한 기록 – 이미지 업로드 게시판 구현기

🔹 1. 에디터 커스터마이징 목적

 

1️⃣ 게시글 작성 중 이미지 직접 업로드 기능 제공
2️⃣ 에디터에서 <img> 태그 삽입까지 실시간 자동 처리
3️⃣ 사용자 UX 중심 작성 환경 구현

---

🔹 2. 업로드 서버 구조 (Java/Spring)

 

📌 컨트롤러 경로

• POST /boardCombo/CKEditor5/uploadImage

• GET /boardCombo/CKEditor5/loadImage

 

📌 업로드 처리 흐름

 

✅ MultipartFile 수신
✅ UUID 기반 고유 파일명 생성
✅ upload.path 경로에 저장
✅ 이미지 URL 반환 (/loadImage?name=...)

 

📌 이미지 불러오기 처리

 

✅ 저장된 경로에서 파일 조회
✅ Files.probeContentType() → MIME 타입 설정
✅ byte[] 로 응답

---

🔹 3. 서버 경로 설정 분리

 

📌 @ConfigurationProperties 사용

@ConfigurationProperties(prefix = "upload")
public class CKEditor5ImgUploadConfig {
  private String path;
}

---

📌 application.properties 예시

upload.path=/usr/local/ckeditor/upload/

---

🔹 4. JS 커스터마이징 – 에디터 연동

 

1️⃣ FileRepository.createUploadAdapter 재정의
2️⃣ fetch()로 이미지 POST 전송
3️⃣ 응답된 url을 { default: url } 형태로 CKEditor에 자동 삽입

 

📌 에러 처리 흐름

 

✅ 413 (Payload too large) → SweetAlert 알림
✅ 서버 오류 발생 시 → 에러 메시지 + 사용자 경고

---

🔹 5. 에디터 사용 방식 (updateBoard.js)

 

1️⃣ editor.getData()로 HTML 콘텐츠 추출
2️⃣ Ajax 전송 시 updateBoardTitle, updateBoardContent 함께 전송
3️⃣ 등록 성공 시 → 게시판으로 리다이렉션

---

🔹 6. JSP 화면 적용

 

1️⃣ textarea를 ClassicEditor로 변환
2️⃣ .ck-editor__editable CSS 설정 (높이 지정)
3️⃣ 등록 버튼 클릭 시 updateBoard() 실행

 

💡 최종 요약

 

✅ 이미지 업로드 요청 수신 → UUID 저장 → URL 응답
✅ CKEditor 내 커스터마이징 어댑터로 이미지 삽입 자동화
✅ SweetAlert로 사용자 중심 에러 대응
✅ HTML/CSS/JS 완성도 높은 연동