Summernote 적용

ewok 2023. 5. 1. 12:28

Summernote - Super Simple WYSIWYG editor

Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.

summernote.org

파일을 직접 받아 추가할 수도 있고, cdn을 이용할 수도 있다.

https://summernote.org/getting-started/#installation

Summernote - Super Simple WYSIWYG editor

Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.

summernote.org

나는 파일을 받아 적용하였다.

압축을 풀고 프로젝트에 복사한다.

파일은 lite 버전을 적용할 것이다. summernote css파일이 부트스트랩의 파일과 충돌할 수 있어 lite를 많이 사용한다고 한다.

layout.html

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title>트위치</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/summernote/summernote-lite.min.css}" rel="stylesheet">
    <script src="/js/jquery.js"></script>
</head>

summernote-lite.min.css 추가

footer.html

    <script src="/summernote/summernote-lite.min.js"></script>
    <script src="/summernote/lang/summernote-ko-KR.min.js"></script>
</div>
</html>

summernote-lite.min.js와 summernote-ko-KR.min.js 추가

두 번째 파일은 한글을 사용하기 위한 파일이다.

summernote를 적용하는 페이지 html 파일

    <form method="post">
        <textarea id="summernote" name="description"></textarea>
    </form>
</div>

<script>
    $(document).ready(function () {
        $('#summernote').summernote({
            // 에디터 높이
            height: 300,
            // 에디터 한글 설정
            lang: "ko-KR",
            // 에디터에 커서 이동 (input창의 autofocus라고 생각)
            focus : true,
            toolbar: [
                // 글꼴 설정
                ['fontname', ['fontname']],
                // 글자 크기 설정
                ['fontsize', ['fontsize']],
                // 굵기, 기울임꼴, 밑줄,취소 선, 서식지우기
                ['style', ['bold', 'italic', 'underline','strikethrough', 'clear']],
                // 글자색
                ['color', ['forecolor','color']],
                // 표만들기
                ['table', ['table']],
                // 글머리 기호, 번호매기기, 문단정렬
                ['para', ['ul', 'ol', 'paragraph']],
                // 줄간격
                ['height', ['height']],
                // 코드보기, 확대해서보기, 도움말
                ['view', ['codeview','fullscreen', 'help']]
            ],
            // 추가한 글꼴
            fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New','맑은 고딕','궁서','굴림체','굴림','돋음체','바탕체'],
            // 추가한 폰트사이즈
            fontSizes: ['8','9','10','11','12','14','16','18','20','22','24','28','30','36','50','72']
        });
    });
</script>

아래는 공식페이지에 있는 적용 예시이다.

https://summernote.org/getting-started/#without-bootstrap-lite

Summernote - Super Simple WYSIWYG editor

Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.

summernote.org

summernote가 적용되는 textarea의 값을 가져올 때는 아래와 같이 가져올 수 있다.

let description = $('#summernote').summernote('code');

'code'를 사용하면 summernote에 작성된 글이나 이미지 등을 태그 그대로 가져올 수 있다.

아래는 내가 사용한 코드이다. 유튜브 영상 링크를 따로 추출하는 것이 필요했기 때문에 따로 분리하는 코드도 작성했다.

    save : function () {
        let description = $('#summernote').summernote('code');
        let youtubeIframe = $(description).find('iframe[src*=youtube]');
        let reference = null;
        let broadcastId = $('#broadcastId').val();
        let array = new Array();
        if (youtubeIframe.length > 0) {
            $.each(youtubeIframe, function (idx, value) {
                let iframe = $(value);
                reference = iframe.attr('src').replace('//www.youtube.com/embed/', 'https://www.youtube.com/watch?v=');
                array.push(reference);
            });
        }

        let data = {
            memberId: $('#member_id').val(),
            title: $('#meme').val(),
            summary: $('#summary').val(),
            broadcastId: broadcastId,
            content: description,
            reference: array
        };

        $.ajax({
            type: 'POST',
            url: '/api/v1/post',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(data)
        }).done(function () {
            window.location.href = '/meme/post/' + broadcastId;
        }).fail(function (error) {
            alert(JSON.stringify(error));
        })
    },

이렇게 summernote('code')로 작성한 내용을 가져와서 원하는 대로 코드를 작성해 사용하면 된다.

summernote에 작성한 내용을 DB에 저장한 뒤 DB에서 다시 가져와 화면에 출력할 때 summernote가 적용된 곳에 출력할 때는 아래와 같이 식으로 하면 된다. (참고로 템플릿 엔진은 타임리프이다.)

<textarea id="summernote" name="description" th:text="${post.getDescription()}"></textarea>

그런데 보통 글을 수정할 때는 에디터에 내용이 출력되게 하는데, 단순히 조회할 때는 에디터에 출력하진 않는다.

하지만 summernote가 적용되지 않은 영역에 위의 코드처럼 th:text를 사용하면 태그가 그대로 나오게 된다.

<p>마이 썸머 카라는 게임 중 나왔다.</p><p><br></p><p><iframe frameborder="0" src="//
www.youtube.com/embed/B41Akh...
" width="640" height="360" class="note-video-clip"></iframe><br></p>

DB에 위처럼 저장되어 있었다면 저렇게 태그 그대로를 포함해서 화면에 나온다. 태그 없이 출력하려면 th:text가 아니라 th:utext를 사용하면 된다.

<div class="mb-3" id="description" name="description" th:utext="${post.getDescription()}">