[WYSIWYG] SummerNote Editor 세팅하기

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

게시판의 글 작성에 필요한 WYSIWYG 중, 한국 사용자의 입맛에 맞는 Editor중에서

무료로 사용할 만한게 눈에 띄지 않았기에

서비스는 종료되었지만 다음 Editor와 네이버 스마트 Editor를 주로 사용해 왔다.

그러다 썸머노트( Summernote )라는 에디터를 알게 되었고 이번에 사용하기 위해 해당 내용을 정리해 보았다.

# 소스코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>:: SummerNote Editor ::</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.css">
    <script type="text/JavaScript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/JavaScript" src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.js"></script>
    <script type="text/JavaScript" src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/lang/summernote-ko-KR.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {

            jQuery("#summernote").summernote({
                  height : 550  // 에디터 높이
                , minHeight : null  // 최소 높이
                , maxHeight : null  // 최대 높이
                , focus : true  // 에디터 로딩후 포커스를 맞출지 여부( true, false )
                , lang : "ko-KR"    // 한글 설정
                , placeholder : "게시글 작성"    //placeholder 설정
                , fontNames : [ "맑은 고딕", "궁서", "굴림체", "굴림", "돋움체", "바탕체", "Arial", "Arial Black", "Comic Sans MS", "Courier New" ]
                , fontNamesIgnoreCheck : ["맑은 고딕"]  // 기본 폰트 설정( 2024-01-28 동작하지 않음, `sans-serif` 자동선택 )
                , fontSizes : [ "8", "9", "10", "11", "12", "14", "16", "18", "20", "22", "24", "28", "30", "36", "50", "72" ]
            });
        });
    </script>
</head>
<body>
    <form>
        <textarea id="summernote" name="editordata"></textarea>
    </form>
</body>
</html>

# 출력결과

:: SummerNote Editor ::

( 상단 Toolbar의 기능 몇가지는 Tisotry와 호환성 문제로 위 출력결과 샘플에서는 전부 사용할 수 없다. )

Editor의 형태는 위와같다.

기본 폰트가 무조건 sens-serif로 잡히는걸 다른 폰트로 변경하려 하였으나 방법을 알 수는 없었다.

특히나 업로드한 이미지에 대하여 Crop 기능을 지원하고,

이미지 자체를 Base64로 변환하여 출력한다는것이 매우 마음에 들었다.

# 소스코드

# 출력결과

티스토리툴바