CKEDITOR 이미지 업로드 활성화

CKEDITOR의 이미지 업로드 기능 추가

---

※ 버전 4 기준

1. CKEDITOR에는 기본적으로 이미지 업로드 버튼이 없다. 따라서 Javascript로 활성화를 시켜줘야 한다.

2. filebrowserUploadUrl: "업로드 주소" -> 추가

3. window.parent.CKEDITOR.tools.callFunction(0|1, "${url}", "메시지");

- 0 : 실패 / 1: 성공

- 이미지 주소 url 반환

- 성공 메시지

// 이미지 업로드 기능 추가
CKEDITOR.replace( "textarea", {
    filebrowserUploadUrl: "${pageContext.request.contextPath}/imageUpload.do"
});
    
window.parent.CKEDITOR.tools.callFunction(1, "${url}", "전송완료");

@RequestMapping(value = "/imageUpload.do", method=RequestMethod.POST)
    public String imageUpload(Locale locale, Model model, HttpServletRequest request, HttpServletResponse response) {
        
        web.init();
        
        /** 컨텐츠 타입 명시 */
        response.setContentType("application/json");
        
        try {
            upload.multipartRequest();
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
        
        List<FileInfo> fileList = upload.getFileList();
        
        String url = "%s/downloadImage.do?file=%s/%s";
        
        String fileName = "";
        
        if (fileList.size() > 0) {
            FileInfo temp = fileList.get(0);
            
            url = String.format(url, web.getRootPath(), temp.getFileDir(), temp.getFileName());
            fileName = temp.getFileName();
            
            model.addAttribute("url", url);
            
        }
        
        /** (6) 처리 결과를 JSON으로 출력하기 */
        Map<String, Object> data = new HashMap<String, Object>();
        data.put("uploaded", 1);
        data.put("fileName", fileName);
        data.put("url", url);
        
        ObjectMapper mapper = new ObjectMapper();
        try {
            mapper.writeValue(response.getWriter(), data);
        } catch (IOException e) {
            e.printStackTrace();
        }
        
        return null;
        
    }

4. WebHelper 초기화 후 json 타입 명시

5. upload multipart 값 받기

6. 첫번째 fileList를 받아서 url과 파일이름을 설정

7. json 형태로 리턴해야하는데 꼭 {"uploaded": 1, "fileName": fileName, "url": url} 형태로 내보내야 한다.

8. 이미지를 첨부하여 서버로 전송 시키면 이미지 탭에서 URL input 태그에 url 파라미터가 자동으로 들어가며 미리보기에 사진이 뜬다.

( 로컬이면 앞이 file:/// 형태가 아닌 http:// 형태가 되는 환경이여야함 )

9. JSON ajax 형태는 GET 방식 이므로 받을 때 GET으로 받아야한다. 주소를 숨긴다고 POST로 해두면 에러난다.