[JavaScript] summernote 사용법(1부)

일단 summernote 파일을 다운받아서 사용했습니다.

    <link href="../../assets/plugins/summernote/dist/summernote-lite.css" rel="stylesheet"/>

    <script src="../../assets/plugins/summernote/dist/summernote-lite.min.js"></script>

 

jsp파일에 위와같이 선언해주고 

<td class="text-center bg-gray-100 border-bottom-0">내용</td>

<td>

    <textarea class="summernote" name="contents" id="contents"></textarea>

</td>

 

위와같이 summernote를 적용할 부분에 class를 추가햅니다.

 

그리고 스크립트 부분에 아래와 같이 추가합니다.

summernote tollbar의 경우 커스텀이 가능합니다.

$(".summernote").summernote({

    height: "150",

    lang: "ko-KR",

    callbacks: {

        onImageUpload : function(files) {

            uploadSummernoteImageFile(files[0], this);

        }

    },

    toolbar: [

        ['fontname', ['fontname']],

        ['fontsize', ['fontsize']],

        ['style', ['bold', 'italic', 'underline','strikethrough', 'clear']],

        ['color', ['forecolor','color']],

        ['table', ['table']],

        ['para', ['ul', 'ol', 'paragraph']],

        ['height', ['height']],

    ],

    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']

});

 

저렇게 하면 아래와 같이 완성이 됩니다.

summernote 모양