spring ckeditor 파일업로드 예제 (file upload)

www.ckeditor.com 에서 Download를 눌러줍니다.

원하시는 package를 받으시면 됩니다.

압축을 풀고 ekeditor를 resource 밑에 넣어줍니다.

해당 경로를 참고하여 주시기 바랍니다.

jsp페이지를 작성해줍니다.

<script type="text/javascript" src="/resources/ckeditor/ckeditor.js"></script> 추가

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

<!-- 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에 빈을 추가해 줍니다.

<beans:bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

controller를 작성합니다.

EditorController.java

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

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