메뉴 건너뛰기

조회 수 249 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

 

spring ckeditor 파일업로드 예제 (file upload)
www.ckeditor.com 에서 Download를 눌러줍니다.

 

 

 

원하시는 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
<!-- fileupload -->
<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를 작성합니다.

EditorController.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
/**
     * 이미지 업로드
     * @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;//url경로
 
            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경로도 따로 빼주시기 바랍니다.

그리고 파일 명 안겹치도록 처리 해주시고 용량 및 파일 검사 여부도 추가해주시기 바랍니다.

 


List of Articles
번호 제목 날짜 조회 수
22 이클립스에서 인코딩 설정 file 2018.06.21 215
21 Spring Security의 동작 방법 file 2018.06.21 251
20 이클립스 파일 찾기 & 문자열 검색 file 2018.06.21 178
19 CKEditor 사용 및 파일 업로드 적용 2018.06.11 230
» spring ckeditor 파일업로드 예제 (file upload) file 2018.06.11 249
17 스프링 CKEditor 적용 - 에디터 2018.06.11 297
16 전자정부프레임워크 사용 중 중복 저장 방지 (새로고침 혹은 뒤로가기시) 2018.06.11 242
15 "알 수 없는 오류가 발생하였습니다." 라는 에러 메시지가 발생했을 때 대처법 2018.06.11 200
14 예제 따라하기(1) - 기본 서블릿 구현 file 2018.06.04 253
13 첫 실행 URL 변경 file 2018.06.04 267
12 전자정부프레임워크 구조 파악하기 file 2018.06.01 241
11 전자정부 프레임워크(eGovframe) 동적 웹프로젝트 시작하기(2) file 2017.09.12 1440
10 전자정부 프레임워크(egov framework) 설치하기(1) file 2017.09.12 1968
9 java.lang.NoClassDefFoundError: org/springframework/dao/support/PersistenceExceptionTranslator 2016.09.21 2227
8 HTMLTagFilter ? 2016.09.21 3305
7 로그인 체크 인터셉터 사용 (AuthenticInterceptor) 2016.09.21 3320
6 getFileNames() 메소드를 이용한 파일 업로드 기능 구현하기 2016.09.21 2847
5 getFileMap() 메소드를 이용한 파일 업로드 기능 구현하기 2016.09.21 2782
4 message 사용을 위한 설정 2016.09.21 2655
3 공통코드관리 2016.09.21 2861
Board Pagination Prev 1 2 Next
/ 2

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved