웹기반 Rich Text Editor Summernote 사용하기

1. CDN 추가

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

<%@ 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>

<%@ include file="/WEB-INF/include/app-header.jspf" %>

<title>Insert title here</title>

</head>

<body>

</body>

</html>

Colored by Color Scripter

3. 에디터 초기화

$(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);

});

Colored by Color Scripter

간단하다.

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

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

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

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

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

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

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

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

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

'Front-End > jQuery' 카테고리의 다른 글

jQuery each 메소드 사용 시 break 또는 continue 제어 (0)	2018.09.17
Bootstrap popover(팝오버) 커스텀 (0)	2018.09.17
form에 대해 빈 값 있는지 확인하기 (0)	2018.09.17
jquery로 input file로 이미지 선택 시 바로 보이게 하기 (0)	2018.09.17
jQuery outerHTML 기능 사용 (0)	2018.09.17

일	월	화	수	목	금	토
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	26	27	28
29	30	31

@deveely