원하시는 package를 받으시면 됩니다.
압축을 풀고 ekeditor를 resource 밑에 넣어줍니다.
해당 경로를 참고하여 주시기 바랍니다.
jsp페이지를 작성해줍니다.
<
script
type
=
"text/javascript"
src
=
"/resources/ckeditor/ckeditor.js"
></
script
> 추가
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
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
< script type = "text/javascript" src = "/resources/ckeditor/ckeditor.js" ></ script >
< form class = "form-horizontal" role = "form" id = "editorForm" method = "post" action = "/" >
< div class = "form-group" >
< div class = "form-group" >
< div class = "col-lg-12" >
< textarea name = "ckeditor" id = "ckeditor" ></ textarea >
</ div >
</ div >
< div class = "form-group" >
< div class = "col-lg-12" align = "right" >
< button type = "submit" class = "btn btn-default" >저장</ button >
</ div >
</ div >
</ div >
</ form >
< script >
$(function(){
CKEDITOR.replace( 'ckeditor', {//해당 이름으로 된 textarea에 에디터를 적용
width:'100%',
height:'400px',
filebrowserImageUploadUrl: '/community/imageUpload' //여기 경로로 파일을 전달하여 업로드 시킨다.
});
CKEDITOR.on('dialogDefinition', function( ev ){
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
switch (dialogName) {
case 'image': //Image Properties dialog
//dialogDefinition.removeContents('info');
dialogDefinition.removeContents('Link');
dialogDefinition.removeContents('advanced');
break;
}
});
});
</ script >
|
해당 부분까지 작성하시면 일단 아래와 같은 에디터를 확인 하실수 있습니다.
파일 업로드를 위한 dependency를 추가해줍니다.
pom.xml
1
2
3
4
5
6
7
8
9
10
11
|
< dependency >
< groupId >commons-fileupload</ groupId >
< artifactId >commons-fileupload</ artifactId >
< version >1.3.1</ version >
</ dependency >
< dependency >
< groupId >commons-io</ groupId >
< artifactId >commons-io</ artifactId >
< version >2.4</ version >
</ dependency >
|
servlet-context.xml에 빈을 추가해 줍니다.
1
|
< beans:bean id = "multipartResolver" class = "org.springframework.web.multipart.commons.CommonsMultipartResolver" />
|
controller를 작성합니다.
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
|
/**
* 이미지 업로드
* @param request
* @param response
* @param upload
*/
@RequestMapping (value = "/community/imageUpload" , method = RequestMethod.POST)
public void communityImageUpload(HttpServletRequest request, HttpServletResponse response, @RequestParam MultipartFile upload) {
OutputStream out = null ;
PrintWriter printWriter = null ;
response.setCharacterEncoding( "utf-8" );
response.setContentType( "text/html;charset=utf-8" );
try {
String fileName = upload.getOriginalFilename();
byte [] bytes = upload.getBytes();
String uploadPath = "저장경로/" + fileName;
out = new FileOutputStream( new File(uploadPath));
out.write(bytes);
String callback = request.getParameter( "CKEditorFuncNum" );
printWriter = response.getWriter();
String fileUrl = "저장한 URL경로/" + fileName;
printWriter.println( "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("
+ callback
+ ",'"
+ fileUrl
+ "','이미지를 업로드 하였습니다.'"
+ ")</script>" );
printWriter.flush();
} catch (IOException e){
e.printStackTrace();
} finally {
try {
if (out != null ) {
out.close();
}
if (printWriter != null ) {
printWriter.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
return ;
}
|
* 처음 에디터를 설치하면 에디터의 이미지 버튼을 클릭할때 업로드 탭이 안보입니다.
jsp에서 filebrowserImageUploadUrl: '/community/imageUpload' 를 추가하면 자동으로 업로드 탭이 생성됩니다.
필요없는 탭은
dialogDefinition.removeContents('Link');
dialogDefinition.removeContents('advanced');
로 제거해주시면 됩니다.
* 에디터 이미지 업로드 팝업창에서 파일을 업로드 하면 controller에서 파일을 받고 저장한 후에 window.parent.CKEDITOR.tools.callFunction을 호출하면서 저장하고난 이미지 url을 넘겨주면 이미지를 불러오게 됩니다.
*controller에서 파일 저장 처리를 하였는데 해당 부분은 service로 따로 빼주시고 저장 및 url경로도 따로 빼주시기 바랍니다.
그리고 파일 명 안겹치도록 처리 해주시고 용량 및 파일 검사 여부도 추가해주시기 바랍니다.
[출처] http://huskdoll.tistory.com/121