반응형
1. CDN 추가
1
2
|
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
|
cs |
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 |
다음과같이 간단한 코드로 가져올 수 있다.
반응형
