https://youtu.be/yuoICQAKzYQ?si=GxBx8C4d1q5sudux

스프링 부트 CKEditor 5 - 에디터 페이지 Form 태그 작성

스프링 부트 CKEditor 5 - 에디터 페이지 Form 태그 작성

Spring Boot + CKEditor 5 : 에디터 페이지 HTML Form 구조 만들기

이번 글에서는 Spring Boot 프로젝트에서 CKEditor 5를 붙이기 전에 반드시 필요한 HTML Form 구조를 먼저 구성한다.

많은 사람들이 여기서 바로 CKEditor를 붙이려고 하는데, 실제로 중요한 포인트는 따로 있다.

CKEditor는 독립적인 UI가 아니라 textarea 위에 올라가는 “플러그인”이다

즉,

👉 Form 구조가 먼저, 에디터는 그 위에 얹는 것

1. 왜 Form 구조가 먼저일까?

웹에서 데이터를 서버로 보내는 방식은 항상 동일하다.

사용자 입력 → Form → HTTP 요청 → Controller

CKEditor도 예외가 아니다.

제목 → input
내용 → textarea (여기에 CKEditor 적용)
버튼 → submit

👉 결국 “일반적인 게시글 작성 Form” 구조 그대로 간다.

2. 기본 HTML Form 구조

가장 기본적인 구조는 아래와 같다.

<form action="/save" method="post">
    <div>
        <label for="title">제목:</label>
        <input type="text" id="title" name="title" placeholder="글 제목을 입력하세요">
    </div>

    <div>
        <label for="content">내용:</label>
        <textarea id="content" name="content" rows="10" cols="80"></textarea>
    </div>

    <div>
        <button type="submit">등록</button>
    </div>
</form>

3. 각 요소의 역할 (중요)

이 코드는 단순해 보이지만, 👉 실제로는 서버와 연결되는 핵심 구조다.

1) form 태그

<form action="/save" method="post">

action: 요청을 보낼 URL
method: POST 방식

👉 /save Controller로 데이터 전달

2) 제목 입력 (input)

<input type="text" name="title">

👉 서버에서 받는 값:

String title

👉 name이 변수명이 된다

3) 내용 입력 (textarea)

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

👉 여기에 CKEditor가 붙는다

👉 서버에서 받는 값:

String content

4) 전송 버튼

<button type="submit">등록</button>

👉 클릭 시 Form 전체 데이터가 서버로 전달

4. 실행 후 확인

서버 실행 후 다음 URL로 접근:

http://localhost:8080/editor

화면 구성

제목 입력창
내용 textarea
등록 버튼

👉 현재 상태:

입력 가능
전송 가능
저장 기능 ❌ (아직 Controller 없음)

5. 왜 지금 저장이 안 될까?

action="/save"

👉 이 경로를 처리하는 Controller가 없음

결과

버튼 클릭 → 에러 발생

👉 정상적인 상태다.

지금 단계는 “UI 준비 단계”이기 때문

6. 한글 깨짐 문제 해결 (중요)

이 부분은 실제로 많이 겪는다.

문제

한글 입력 → ??? 로 표시

원인

UTF-8 인코딩 설정 없음

해결 방법

application.properties

spring.http.encoding.charset=UTF-8
spring.http.encoding.force=true

적용 후

한글 정상 출력
DB 저장 시에도 문제 없음

7. 지금 단계에서 중요한 포인트

이 단계에서 반드시 이해해야 할 것:

1. CKEditor는 textarea 기반

textarea 없으면 동작 불가

2. name 속성이 서버 변수명

name="title"

👉 Controller에서 그대로 받는다

3. Form 구조가 API 계약이다

Frontend → Backend 데이터 계약

👉 이 구조가 깨지면 데이터 전달 실패

8. 다음 단계에서 할 것

이제 진짜 CKEditor를 붙인다.

다음 작업

CKEditor CDN 추가
textarea → CKEditor 변환
에디터 UI 확인
데이터 전송 테스트

정리

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

CKEditor는 textarea 위에 올라가는 도구일 뿐, 진짜 핵심은 Form 구조다

핵심 요약

form → 서버로 데이터 전달
input → 제목
textarea → 내용 (CKEditor 대상)
button → 전송 트리거
name → 서버 변수명

스프링 부트 CKEditor