[SSR] SimpleMDE 적용하기

이전에 마크다운 라이브러리를 2번 정도 사용했었는데 2번 다 방법이 달랐다.

 

첫번째는 수작업으로 textarea에 마크다운 문법만 붙여넣으면 오른쪽에 만들어둔 div에 marked 라이브러리 붙여서 실시간으로 마크다운 파싱해서 보여줬었고..

 

두번째는 Toast UI Editor를 적용시켰는데 커스터마이징 할 수 있는 기능들은 SSR에서는 지원이 안되길래 이번에 SimpleMDE로 갈아탔다.

1. SimpleMDE CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

 

어디다 적용시켜야 하는지 모른다면 검색해보자..

 

나는 thymeleaf에서 제공하는 layout 라이브러리로 공동 레이아웃을 따로 관리하고 있기 때문에 head.html에 적용시켜놨다.

2. PrismJS CDN

얘는 소스코드를 꾸며주는 역할을 한다. 보통 티스토리 블로그에서 문법 강조시키는..

 

https://prismjs.com/download.html#themes=prism-solarizedlight&languages=markup+css+clike+javascript

 

여기서 테마랑 적용시킬 언어들을 선택 후 다운로드 받는다. static 폴더에 잘 붙여넣자.

3. Commonmark 의존성 주입

implementation 'com.atlassian.commonmark:commonmark:0.13.0'

 

gradle은 위에 꺼 쓰고 maven은 https://mvnrepository.com/artifact/com.atlassian.commonmark/commonmark/0.13.0 여기서 가져가자.

4. Commonmark 클래스 생성

@Component
public class CommonmarkUtil {
    public String markdown(String md) {
        Parser parser = Parser.builder().build();
        Node document = parser.parse(md);
        HtmlRenderer renderer = HtmlRenderer.builder().build();
        return renderer.render(document);
    }
}

 

util 같은 패키지 만들어놓고 붙여넣는다.

 

파라미터의 md는 클라이언트 측에서 받아온 마크다운 문법의 텍스트다.

 

위의 코드를 통해 마크다운 문법으로 가져온 텍스트를 HTML 문법으로 파싱하는 클래스다.

 

일단 만들어만 놓는다.

5. Controller 수정

원래 만들어놨던 Controller가 있을 것이다. 새로 만들어야한다면 만들자. 나는 Ajax에서 데이터를 넘기는데 방법은 다 다를테니.. 알아서 작성하고 Controller를 살펴보자.

 

참고로 전체 소스코드는 없다.

 

게시글 작성 시 DB에 INSERT 할 때는 마크다운 텍스트를 넣는다. 그리고 게시글을 읽을 때 아래와 같이 파싱한다.

 

    @GetMapping("/read-md")
    public String readMarkdown(@RequestParam Map<String, Object> requestMap, Model model) {
        Map<String, Object> boardSelect = service.boardSelect(requestMap);
        String code = (String) boardSelect.get("icode");
        boardSelect.put("article_title", articleTitleGet(code));
        boardSelect.put("contents", commonmarkUtil.markdown((String) boardSelect.get("contents")));
        model.addAttribute(Const.DATA, boardSelect);
        return "board/read-md";
    }

 

내가 봤을 때 INSERT 시킬 때 HTML 코드로 변환시켜 넣으면 마크다운보다 용량도 많아지고 다시 가져와서 수정할 때 또한 다시 마크다운 문법으로 변환시켜줘야 하는 번거러움이 있다.

 

그래서 나는 DB에는 마크다운 그대로 넣어두고 게시글 보여줄 때만 HTML 문법으로 파싱시켜 출력한다. 수정할 때 또한 DB에 있던 마크다운 텍스트를 가지고 오기만 하면 되기 때문에 훨 수월하다.

6. HTML 수정

게시글 작성 혹은 수정 페이지에서는 아래와 같이 textarea를 하나 만들어두고 웹에디터로 초기화시킨다.

 

<textarea id="editor"></textarea>

 

    // SimpleMDE 웹에디터 초기화
    var editor = new SimpleMDE({
        element: $("#editor")[0]
    });

 

textarea가 아닌 div로 할 경우 초기화가 안된다는 점 인지하자.

 

그리고 게시글을 읽을 때는 아래와 같이 DOM이 시작될 때 Controller에서 model 객체에 담아 보낸 게시글 내용을 웹에디터에 갖다붙여 넣는다.

 

    $(document).ready(() => {
        let contents = [[${DATA.contents}]];
        $('#editor').html(contents);
    });

이렇게만 해주면 아래와 같이 적용된 모습을 확인할 수 있다.