CKEditor5 커스텀 빌드 수정하는법

CKEditor5 커스텀 빌드 수정 시

어떻게 해야하는지를 간단히 정리해본다.

 

CKEditor5를 커스텀 빌드 방식으로

사용하고 있다면, 에디터 기능 추가/수정은

JSP나 이클립스에서 하는 작업이 아니다.

 

핵심은 Node 기반 빌드 구조를 이해하는 것이다.

---

[ CKEditor 커스텀 빌드 구조 요약 ]

ckeditor5-build-classic
 ├─ src/
 │   └─ ckeditor.js   ← 기능 정의 파일
 ├─ build/
 │   └─ ckeditor.js   ← 실제 배포 결과물

1) src/ckeditor.js

에디터에 어떤 기능이 있는지 정의하는 설계도

이미지 업로드, 크기 조절, 캡션 등 기능 추가는 여기서만 가능

 

2) build/ckeditor.js

위 설계도를 기반으로 webpack이 생성한 결과물

브라우저(JSP)가 실제로 읽는 파일

 

※ 자주 하는 오해

src/ckeditor.js를 메모장으로 열어서 수정하고
저장만 하면 끝나는 거 아닌가?

 

X - 아니다!!!

해당 파일 수정만으로는

아무 변화도 발생하지 않는다.

---

[ 올바른 수정 흐름 (중요) ]

CKEditor 기능을 수정할 때 반드시 아래 순서를 따른다.

 

1) src/ckeditor.js 수정

C:\LSHCK\ckeditor5-build-classic\src\ckeditor.js

• 이미지 크기 조절
• 이미지 정렬
• 캡션
• 툴바 버튼 추가 등

→ 즉 파일 수정은 기능 정의만 하는 단계

 

2) 반드시 빌드 실행(CMD)

npm run build

CDM에 해당 키워드를 입력해야 한다.

이 과정에서

• src/ckeditor.js → build/ckeditor.js 로 컴파일됨
• 이 단계를 건너뛰면 수정 내용은 절대 반영되지 않음

3) 빌드 결과물 복사

C:\LSHCK\ckeditor5-build-classic\build\ckeditor.js

⬇

Eclipse 프로젝트 /src/main/webapp/js/ckeditor.js

기존 파일 덮어쓰기 발생

---

[ 이클립스에서 할 일 ]

CMD에서 npm run build로 생성된
build/ckeditor.js 파일을

이클립스 프로젝트의
src/main/webapp/js/ckeditor.js 경로에
덮어쓰기 해준다.

 

1. 파일 덮어쓴 뒤

2. 자동 반영 안 되면

> 새로고침(F5)

> 또는 서버 재시작

 

이클립스는 CKEditor 기능을 “사용만” 한다.
기능 정의에는 전혀 관여하지 않는다.

 

※ 절대 하면 안 되는 행동

• build/ckeditor.js를 직접 수정하는 것
  → 다음 빌드 시 전부 사라짐
• JSP에서 옵션으로 기능을 켜려는 것
  → 플러그인이 없으면 동작하지 않음

---

한 줄 요약

CKEditor5 커스텀 빌드에서 기능 수정은
src/ckeditor.js 수정 → npm run build → 결과물 복사

 

이 3단계가 전부이며,
이클립스는 결과물을 불러오기만 하면 된다.