CKEditor 사용 및 파일 업로드 적용

1. CKEditor 다운

- DOWNLOAD URL

http://ckeditor.com/ 에서 다운로드

- 설치 위치

webapp 밑에 copy

- JSP 설정

<script src="${pageContext.request.contextPath}/js/ckeditor/ckeditor.js"></script>

<textarea name="contents" id="contents" rows="50" cols="10">

               

</textarea>

<script>

// Replace the <textarea id="editor1"> with a CKEditor

// instance, using default configuration.

CKEDITOR.replace( 'contents', {

filebrowserUploadUrl: '${pageContext.request.contextPath}/file/ckeditorImageUpload.do'

});

</script>

filebrowserUploadUrl 을 설정을 해주어야만 사진 업로드 시 업로드 탭이 생겨 사진파일을 업로드 할 수 있다.

그렇지 않으면 CKFinder를 사용하여 적용 시켜주어야 한다.

- 사진 업로드 구현 Servlet

Controller

@RequestMapping(value="/file/ckeditorImageUpload.do", method=RequestMethod.POST)

public void ckeditorImageUpload(HttpServletRequest request, HttpServletResponse response, @RequestParam MultipartFile upload) throws     Exception {

response.setCharacterEncoding("UTF-8");

response.setContentType("text/html;charset-utf-8");

try {

fileService.ckeditorImageUpload(request, response, upload);

} catch (IOException e) {

e.printStackTrace();

}

}

Service Impl

@SuppressWarnings("resource")

public void ckeditorImageUpload(HttpServletRequest request, HttpServletResponse response, MultipartFile file) throws Exception {

OutputStream out = null;

PrintWriter printWriter = null;

String fileName = file.getOriginalFilename();

byte[] bytes = file.getBytes();

String uploadPath = FILE_URL + "\\" + fileName;

System.out.println(uploadPath);

out = new FileOutputStream(new File(uploadPath));

out.write(bytes);

String callback = request.getParameter("CKEditorFuncNum");

printWriter = response.getWriter();

String fileUrl = request.getContextPath()+SAVE_URL + "/" +fileName; //url 경로

printWriter.println("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("

               + callback

               + ",'"

               + fileUrl

               + "','이미지를 업로드 하였습니다.'"

               + ")</script>");

       printWriter.flush();

}