Spring Editor (CKEditor, SummerNote) 사용
Back-End/Spring 2019. 7. 2. 11:29Smart Editor
WYSIWYG Editor (위지윅 에디터, whar you see is what you ger)
- 사용자가 현재 화면에서 보고 있는 내용과 동일한 html code를 생성하는 에디터
- 네이버, 다음 에디터, CKEditor, SummerNote 등
CKEditor과 SummerNote의 차이점 CKEditor : 이미지 파일은 디렉토리에 저장, 테이블에는 링크만 저장 Summernote : 이미지를 테이블에 저장 (이미지를 테이블에 저장하면 DB가 과부하가 걸릴 수 있다.) |
가. CKEditor
- http://ckeditor.com
- 자바스크립트 기반 위지윅 웹에디터, 쉬운 이식, 웹사이트 구축언어가 asp든, php든 관계없이 도입하기가 용이하다.
- 현재 CKEditor5 버전이 최신 버전이지만 여기서는 안정화된 버전인 CKEditor 4.11.2 버전으로 실습함
- 이미지 업로드를 위해서는 별도의 작업이 필요함 (컨트롤러를 미리 호출하는 등의 작업이 필요..)
-다운로드 방법-
1. https://ckeditor.com/ckeditor-4/download/ 접속
2. Standard Package 다운로드
3. 다운로드 후 압축을 풀고 ckeditor 디렉토리를 views에 붙인다.
- ckeditor 실습 예제 -
| view 하위의 디렉토리들은 기본적으로 selvlet으로 인식이 된다. 그렇기 때문에 리소스로 등록을 하지 않으면 링크가 되지 않고 404에러가 발생을 하게 된다. 그렇기 때문에 servlet-context.xml에 리소스 매핑을 해주어야 한다. |
1. servlet-context.xml에 리소스 매핑을 추가
|
1
|
<resources location="/WEB-INF/views/ckeditor/" mapping="/ckeditor/**"></resources>
|
cs |
2. ckeditor.js 참조 (ckeditor을 붙이고 싶은 파일로 이동해서 태그를 넣으면 된다)
|
1
|
<script src = "${path}/ckeditor/ckeditor.js"></script>
|
cs |
3. ckeditor를 적용할 태그에 작성
(WEB-INF/views/shop/product_write.jsp 와 product_edit.jsp 에 적용해보기)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div style = "width:800px;">
내용
<textarea id = "description" name = "description" rows = "5" cols = "80"
placeholder = "상품설명을 입력하세요"></textarea> //이런 textarea가 있을때 주로 스마트에디터를 많이 사용
<!--textarea를 스마트에디터로 변경함--!>
<script>
//CKEDITOR.replace("description"); //태그의 id
//이미지 업로드를 할 경우
CKEDITOR.replace("description",{
//CKEDITOR.replace와 id("description")를 잘 적어주면 그 태그가 smart editor 스타일로 바뀌게 된다.
filebrowserUploadUrl : "${path}/imageUpload.do"
//파일을 업로드 해야하기 때문에 filebrowserUploadUrl을 사용하고, 서버쪽에 코드를 완성해주어야 한다.
});
</script>
</div>
|
cs |
4. product_write.jsp 에 ckeditor을 적용하기 위한 코드를 추가
|
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
32
33
34
35
36
37
38
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- views/shop/product_write.jsp -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="../include/header.jsp" %>
<!-- ckeditor 사용을 위해 js 파일 연결 -->
<script src="${path}/ckeditor/ckeditor.js"></script>
</head>
<body>
<%@ include file="../include/admin_menu.jsp" %>
============중간생략==========================
<tr>
<td>상품설명</td>
<td><textarea rows="5" cols="60"
name="description" id="description"></textarea>
<script>
//id가 description인 태그에 ckeditor를 적용시킴
//이미지 업로드 안됨
CKEDITOR.replace("description",{
filebrowserUploadUrl : "${path}/imageUpload.do"
}); //이미지 업로드 기능을 추가하기위한 코드
</script>
</td>
</tr>
<tr>
<td>상품이미지</td>
<td>
<input type="file" name="file1" id="file1">
</td>
</tr>
|
cs |
5. ImageUploadController.java (컨트롤러)
|
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
package com.example.spring02.controller.upload;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
@Controller // 컨트롤러 어노테이션
public class ImageUploadController {
// 컨트롤러클래스의 로그를 출력
private static final Logger logger = LoggerFactory.getLogger(ImageUploadController.class);
// 이미지 업로드
// product_edit페이지에서 맵핑되는 메소드
@RequestMapping("imageUpload.do")
// 이미지를 저장하고, 불러오고, 업로드하기위해 매개변수를 선언
public void imageUpload(HttpServletRequest request, HttpServletResponse response, @RequestParam MultipartFile upload)
//MultipartFile 타입은 ckedit에서 upload란 이름으로 저장하게 된다
throws Exception {
// 한글깨짐을 방지하기위해 문자셋 설정
response.setCharacterEncoding("utf-8");
// 마찬가지로 파라미터로 전달되는 response 객체의 한글 설정
response.setContentType("text/html; charset=utf-8");
// 업로드한 파일 이름
String fileName = upload.getOriginalFilename();
// 파일을 바이트 배열로 변환
byte[] bytes = upload.getBytes();
// 이미지를 업로드할 디렉토리(배포 디렉토리로 설정)
String uploadPath = "D:\\work\\.metadata\\.plugins\\org.eclipse.wst.server.core\\tmp1\\wtpwebapps\\spring02\\WEB-INF\\views\\images\\";
OutputStream out = new FileOutputStream(new File(uploadPath + fileName));
// 서버로 업로드
// write메소드의 매개값으로 파일의 총 바이트를 매개값으로 준다.
// 지정된 바이트를 출력 스트립에 쓴다 (출력하기 위해서)
out.write(bytes);
// 클라이언트에 결과 표시
String callback = request.getParameter("CKEditorFuncNum");
// 서버=>클라이언트로 텍스트 전송(자바스크립트 실행)
PrintWriter printWriter = response.getWriter();
String fileUrl = request.getContextPath() + "/images/" + fileName;
printWriter.println("<script>window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + fileUrl
+ "','이미지가 업로드되었습니다.')" + "</script>");
printWriter.flush();
}
}
|
cs |
만약에 에러가 발생할 경우
ckeditor / config.js 파일을 열고 마지막 라인에 추가
| config.filebrowserUploadMethod = 'form'; |
ckeditor 적용 화면
나. SummerNote
- http://summernote.org (우리나라 개발자들이 만듦)
- 이미지를 텍스트 형식으로 저장함
- 적용 예시
1. http://summernote.org 접속해서 SummerNote 다운로드
2. 압축을 풀고 dist 디렉토리를 views에 붙이고 이름을 summernote로 변경한다.
3. servlet-context.xml에 리소스 매핑 추가
(location이 실제 경로이고, mapping가 url 상의 경로를 의미한다)
|
1
|
<resources location="/WEB-INF/views/summernote/" mapping="/summernote/**"></resources>
|
cs |
4. product_write.jsp (상품정보 쓰기 페이지)에 summernote를 적용
4-1 적용시킬 코드를 찾기 위해 summernote 홈페이지로 이동하고, Getting started를 클릭
4-2 스크롤바를 밑으로 내려서 Include js/css 안에 있는 코드를 복사한다. (summernote 라이브러리를 사용하기 위한 코드)
5. product_write.jsp (상품정보 쓰기 페이지)에 summernote를 적용 시키는 코드를 추가
(복사한 코드를 붙여넣기)
product_write.jsp
|
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- views/shop/product_write.jsp -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="../include/header.jsp" %>
<!-- include libraries(jQuery, bootstrap) -->
<!-- summernote홈페이지에서 받은 summernote를 사용하기 위한 코드를 추가 -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js -->
<!-- 이 css와 js는 로컬에 있는 것들을 링크시킨 것이다. -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
<%-- <!-- ckeditor 사용을 위해 js 파일 연결 -->
같은 페이지에 스마트에디터를 동시에 2개를 사용할 수 없으므로 ckeditor은 주석처리 한다.
<script src="${path}/ckeditor/ckeditor.js"></script> --%>
</head>
<body>
<%@ include file="../include/admin_menu.jsp" %>
<script>
//id가 description인 것을 summernote 방식으로 적용하라는 의미이다.
//높이와 넓이를 설정하지 않으면 화면이 작게 나오기때문에 설정해주어야 한다.
$(function(){
$("#description").summernote({
height : 300,
width : 800
});
});
function product_write(){
// 태그를 name으로 조회할 경우
//var product_name=document.form1.product_name.value;
// 태그를 id로 조회할 경우
var product_name=$("#product_name").val();
var price=$("#price").val();
var description=$("#description").val();
if(product_name==""){ //빈값이면
alert("상품이름을 입력하세요");
$("#product_name").focus(); //입력포커스 이동
return; //함수 종료, 폼 데이터를 제출하지 않음
}
if(price==""){
alert("가격을 입력하세요");
$("#price").focus();
return;
}
/* if(description==""){
alert("상품 설명을 입력하세요");
$("#description").focus();
return;
} */
//폼 데이터를 받을 주소
document.form1.action="${path}/shop/product/insert.do";
//폼 데이터를 서버에 전송
document.form1.submit();
}
</script>
<h2>상품 등록</h2>
<form name="form1" method="post"
enctype="multipart/form-data">
<table>
<tr>
<td>상품명</td>
<td><input name="product_name" id="product_name"></td>
</tr>
<tr>
<td>가격</td>
<td><input name="price" id="price"></td>
</tr>
<tr>
<td>상품설명</td>
<td><textarea rows="5" cols="60"
name="description" id="description"></textarea>
<script>
//위쪽과 마찬가지로 같은페이지에서 스마트에디터를 동시에 2개를 사용할 수 없으므로 주석처리 한다.
//id가 description인 태그에 ckeditor를 적용시킴
//CKEDITOR.replace("description"); //이미지 업로드 안됨
/* CKEDITOR.replace("description",{
filebrowserUploadUrl : "${path}/imageUpload.do"
}); */
</script>
</td>
</tr>
<tr>
<td>상품이미지</td>
<td>
<input type="file" name="file1" id="file1">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="등록"
onclick="javascript:product_write()">
<input type="button" value="목록"
onclick="location.href='${path}/shop/product/list.do'">
</td>
</tr>
</table>
</form>
</body>
</html>
|
cs |
summernote 적용 화면
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
'Back-End > Spring' 카테고리의 다른 글
| 게시판 만들기 (게시글 목록) (0) | 2019.07.02 |
|---|---|
| 게시판 만들기 (기본구조, 테이블 생성) (0) | 2019.07.02 |
| Spring 이메일 보내기 (1) | 2019.07.01 |
| Spring xml bean property 정리 (0) | 2019.07.01 |
| jQuery 이벤트 바인딩 (0) | 2019.06.30 |