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();
}
이클립스 파일 찾기 & 문자열 검색
spring ckeditor 파일업로드 예제 (file upload)