[CKEditor5] CKEditor 5 사용법과 JSP 적용 방법 정리 🧹

🔧 API_

[CKEditor5] CKEditor 5 사용법과 JSP 적용 방법 정리 🧹

Joyfullyever 2025. 3. 25. 20:04

✅ CKEditor5 적용법

1️⃣ 기본 설정 (JSP File)

→ 아래 코드(CDN)를 JSP 파일에 추가하여 CKEditor 5를 적용

✔ 핵심 코드

→ <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CKEditor 5 사용</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
</head>
<body>
    <form action="SaveContentServlet" method="POST">
        <input type="text" name="title" placeholder="제목을 입력하세요" required>
        <textarea id="editor" name="content"></textarea>
        <button type="submit">저장</button>
    </form>

    <script>
        ClassicEditor
            .create(document.querySelector('#editor'))
            .catch(error => console.error('Editor error:', error));
    </script>
</body>
</html>

2️⃣ 데이터 저장을 위한 Servlet (Java)

✔ 사용자가 입력한 내용을 파일로 저장하고 불러오는 Servlet 코드

@WebServlet("/SaveContentServlet")
public class SaveContentServlet extends HttpServlet {
    private static final String FILE_PATH = "/path/to/content.txt";

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String title = request.getParameter("title");
        String content = request.getParameter("content");

        try (FileWriter writer = new FileWriter(FILE_PATH)) {
            writer.write("제목: " + title + "\n내용:\n" + content);
        }

        response.sendRedirect("SaveContentServlet");
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        File file = new File(FILE_PATH);
        StringBuilder content = new StringBuilder();

        if (file.exists()) {
            try (BufferedReader reader = new BufferedReader(new FileReader(file))) {
                String line;
                while ((line = reader.readLine()) != null) {
                    content.append(line).append("\n");
                }
            }
        }

        response.setContentType("text/html; charset=UTF-8");
        response.getWriter().println("<h1>저장된 글</h1><pre>" + content.toString() + "</pre>");
    }
}

3️⃣ CKEditor 5에서 내용을 입력받기

✔ 위 1️⃣번의 JSP파일을 실행한 후, CKEditor5를 이용해 내용을 입력받기

4️⃣ CKEdtior 5에서 입력한 내용을 브라우저에 출력

✔ 2️⃣번의 Servlet 코드를 통하여, 입력받은 내용을 브라우저에 출력