[Spring]CKEditor로 이미지 첨부하기

1.파일 첨부를 위한 POM.xml dependency 추가 작성

 

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

 

2.dispatcher-servlet.xml에 bean 추가

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

 

3.View에 CKEditor 적용시키기

<script type = "text/javascript">
    <@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %>
    <script type = "text/javascript" src = "<c:url value = '/ckeditor/ckeditor.js' />"></script>

    var editorConfig = { filebrowserUploadUrl : "/fileUpload.do" };
    
    var ck = null;

    window.onload = function(){
        ck = CKEDITOR.replace("textarea ID" , editorConfig);
    };
</script>

 

4.파일 업로드 전용 VO를 하나 만들어준다

 

public class FileUploadVO{
    private String attachPath; //이미지가 저장될 경로

    private String Filename; //파일이름

    private MultipartFile upload;

    private String CKEditorFuncNum;//CKEditor가 이미지 첨부할때 보내는 데이터
                                    //꼭 대소문자 저렇게 구분해서 줘야 modelAttribute가 인식해서 받아줌 

    //setter , getter 생략
}

 

5.컨트롤러 작성

@Controller
public class FileUploadController{
    @RequestMapping(value = "/fileUpload.do")
    public String fileUpload(@ModelAttribute("fileUploadVO") FileUploadVO fileUploadVO , HttpServletRequest request , Model model){
        HttpSession session = request.getSession();
        String rootPath = session.getServletContext().getRealPath("/");
        String attachPath = "upload/";

        MultipartFile upload = fileUploadVO.getUpload();
        String filename = "";
        String CKEditorFuncNum = "";
        
        if(upload != null){
            filename = upload.getOriginalFilename();
            fileUploadVO.setFilename(filename);
            CKEditorFuncNum = fileUploadVO.getCKEditorFuncNum();
            try{
                File file = new File(rootPath + attachPath + filename);
                upload.transferTo(file);
            }catch(IOException e){
                e.printStackTrace();
            }  
        }
            model.addAttribute("filePath",attachPath + filename);          //결과값을
            model.addAttribute("CKEditorFuncNum",CKEditorFuncNum);//jsp ckeditor 콜백함수로 보내줘야함
        return "sample/fileUploadComplete";
    }
}

 

6.CKEditor 콜백함수 날려줄 jsp 페이지

    <@ page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8" %>
    <@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %>
    <script type = "text/javascript" src = "<c:url value = '/ckeditor/ckeditor.js' />"></script>

    <script type = "text/javascript">
        window.parent.CKEDITOR.tools.callFunction('${CKEditorFuncNum}','${filePath}', '업로드완료');
    </script>