본문으로 바로가기
반응형

1. CDN 추가


2. 에디터를 보여줄 공간에 설정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <%@ include file="/WEB-INF/include/app-header.jspf" %>
        <title>Insert title here</title>
    </head>
    <body>
        <div id="summernote"></div>        
    </body>
</html>
cs


3. 에디터 초기화

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(document).ready(function(){
        var toolbar = [
            ['style', ['bold''italic''underline''clear']],
            ['font', ['strikethrough''superscript''subscript']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul''ol''paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link''picture''hr']],
            ['view', ['fullscreen''codeview']],
            ['help', ['help']]
        ];
                
        var setting = {
            height : 300,
            minHeight: null,
            maxHeight: null,
            focus : true,
            lang : 'ko-KR',    
            toolbar : toolbar
        };
                
        $('#summernote').summernote(setting);
});
cs


간단하다.

toolbar 변수는 에디터 상단에 어떤 버튼들을 보여줄지 설정하는 것이다.

자세한 버튼 설정은 아래 링크에서 확인

http://summernote.org/deep-dive/#initialization-options


다음 에디터 초기 설정이다.

setting에 들어가는 값으로 대부분 높이, 포커스 등 설정 가능하고 toolbar변수를 이 setting에 넣어준다.


다음으로 에디터를 위치시킬 div에 summernote 메소드를 실행해주면 다음과 같이 에디터가 보여진다.



참고로 에디터에서 편집한 값을 html코드로 가져오는 방법은


1
var htmlStr = $('#summernote').summernote('code');
cs


다음과같이 간단한 코드로 가져올 수 있다.

반응형