스프링부트에ckeditor5 적용시키는 방법

오름오름 프로젝트 중 게시글을 쓰는 기능이 있다.

여기서 팀원 중 한 명이 글쓰기에 에디터 기능을 넣는 게 어떻냐는 의견이 나왔고, 다들 좋다고 하였다.

그래서 이 검색 키워드가 딱히 생각이 나지 않았던 찰나 코칭 강사님께서 위지윅에 대해서 알려주셨고

위지윅은 What You See Is What You Get 이라는 약자 WYSIWYG이였다. 많은 위지윅이 있었지만 그중 ckeditor5를 선택하였다.

그래서 이슈 만들고 ckeditor5 를 적용해 보려고 했다.

https://ckeditor.com/

대충 구글링 해보니 요새 트렌드에 맞게 직접 다운받아서 폴더를 넣어서 쓸껀지, CDN방식으로 쓸건지 Node.js나 다른 프레임워크에서는 설치해서 쓸껀지 정할 수 있다. 

나는 첨에 먼저 기능을 써보고 싶어서 quick start guide를 선택했다.

코드를 보고 와 진짜 간단하다는 생각이 들었고, 대충 코드 살펴보니 #editor 이 부분에 id값을 불러와서 create해주고 에디터가 만들어지는구나 했다. 그래서 실제로 코드를 입력해봤는데 적용이 되지 않았다..

 

아무래도 원래 있었던 코드에 그냥 저 코드를 넣어놔서 충돌이나는걸까? 라는 생각을 했고

따로 html페이지를 만들어서 코드를 실행해봤는데 이번엔 제대로 작동한 모습을 볼 수 있었다. 

 

그래서 여기서부터 삽질이 시작됐다. 따로 html페이지를 만들었을땐 잘 되고 이미 짜여진 코드에 넣었을 땐 되지 않는다..

이것은 내가 짜여진 코드와 어디에 충돌하거나 내가 사용법을 잘 몰랐던 것이다.

 

그렇게 하나하나 파헤쳐보고 검색해봤다.

1. This is some sample content는 화면에 잘 출력이 됐다.(이 말은 일단 body에 div부분은 잘 작동이 된다는 뜻)

2. 에디터가 생성이 안된다. (그러면 스크립트 부분에 문제가 있는 것인데, 나는 코드를 복사해 온 것이기 때문에 전혀 문제가 없다고 생각했다)

 

이렇게 시행착오를 겪고 혹시 스크립트 위치가 문제가 아닐까 싶어(원래 코드에서는 스크립트를 맨 아래 빼뒀음)

script문을 코드 바로 아래에 위치하니까

드디어 됐다 !!

script위치가 쓰려고 하는 곳 바로 아래에 위치해야 한다는 것을 알게 되었다.

 

기분이 좋아서 글을 저장하려는 순간 저장이 안되었다 ..

 

<div id="editor" class="mb-3">
            <label for="content" class="form-label">내용</label>
            <textarea name="content"
                      th:field="*{content}"></textarea>
            <!--
            th:field="*{content} ==> id="content" name="content" th:text="*{content}"
            -->
            <!--
            required를 입력하면 해당칸들을 빈칸으로 넘어갈 수가 없다. 또 "이 입력란을 작성하세요" 라는 메시지가 뜸
            -->
        </div>

왜 저장이 안되지 하고 봤는데, 초기에 editor라는 id를 퀵 스타트 예시와 같이 div에 넣고 실행을 하니 textarea에 값이 넘어가지 않는것이였다. (생각해보니 이유가 editor라는 아이디를 가진애한테 ckeditor를 생성해주는 것인데, textarea에 아무리 값을 적어도 값이 안들어가는 것이 맞다고 생각이 들었다.)

<div class="mb-3">
            <label for="content" class="form-label">내용</label>
            <textarea id="editor" name="content"
                      th:field="*{content}"></textarea>
            <!--
            th:field="*{content} ==> id="content" name="content" th:text="*{content}"
            -->
            <!--
            required를 입력하면 해당칸들을 빈칸으로 넘어갈 수가 없다. 또 "이 입력란을 작성하세요" 라는 메시지가 뜸
            -->
        </div>

그래서 위와 같이 코드를 변경해주니 content값이 잘 넘어갔다.!!

 

하지만 다른 문제가 생겼다.

마크다운 문법으로 값을 입력하니 실제 게시글에 입력된 값은

<h2>124<h2>

이렇게 값이 들어가있었다..

 

내가 너무 세상을 쉽게 생각했나.. 나는 ckeditor5에서 이런거 까지 다 지원을 해줄줄 알았다.

그래서 급하게 구글링으로 '스프링부트 마크다운문법 적용'를 검색했고

 

package com.ll.olol.base.util;

import org.commonmark.node.Node;
import org.commonmark.parser.Parser;
import org.commonmark.renderer.html.HtmlRenderer;
import org.springframework.stereotype.Component;

/*
마크 다운 문법을 적용시켜주는 util
 */
@Component
public class CommonUtil {
    public String markdown(String markdown) {
        Parser parser = Parser.builder().build();
        Node document = parser.parse(markdown);
        HtmlRenderer renderer = HtmlRenderer.builder().build();
        return renderer.render(document);
    }
}

마크 다운 문법을 적용시켜주는 util를 컴포넌트 어노테이션으로 적용시켜서

마크 다운 문법이 사용되는 html에

<div class="card-text" th:utext="${@commonUtil.markdown(recruitmentArticle.content)}"></div>

이런 방식으로 값을 적용시켜주니 마크다운문법이 잘 적용된 모습을 볼 수 있었다!!