ckeditor 파일 업로드 구현

ckeditor 파일 업로드 구현에 대해서 설명 해드리겠습니다

다운로드 들어가면 ckedior 목적에 다운 받으시면 되요!

https://ckeditor.com/download

JSP 페이지 에서 초기 설정 해줘야 되는데 안해주면 upload가 빠지는 경우가 생깁니다.

하는 방법은 아래와 같이 해주면 되는데 textarea 일경우 textarea 바로 아래에 설정값을 넣어주는 이유는 가독성 때문에

바로 하단에 추가 시켰습니다.

submit이나 ajax를 통한 정보를 보낼 때는 실질적으로 textarea가 들어가지 않으므로 ckedior 스크립트를 이용 해야 됩니다.

var editorText = "";
editorText = CKEDITOR.instances.background.getData();
$('#background').html(editorText);
  //
if(editorText == ""){
  alert("Please enter your background");
  return;
}

이런 식으로 저장을 눌렀을경우 script 단에서 넣어주시면 되겠습니다

@RequestMapping("/csdCkEditorUploadFile.msc")
	public String csdCkEditorUploadFile(HttpServletRequest req,Model model,CkEditorVO ckEditorVO,BindingResult result,Authentication auth) throws Exception {
		
		String file_Path = Const.PATH_ROOT + Const.PATH_CSD;
		MultipartFile upload = CkEditorVO.getUpload(); 
		String filename = ""; 
		String CKEditorFuncNum = ""; 
		String img_check = "true"; //이미지 체크 mime 아닐경우 false 
		
		if (upload != null) { 
			filename = upload.getOriginalFilename();  //오리지널 파일 추출
			CkEditorVO.setFilename(filename); 
			CKEditorFuncNum = CkEditorVO.getCKEditorFuncNum(); 
			File file = new File(file_Path + filename); 
			Path source = Paths.get(file_Path + filename); // PATH 경로 저장
			
			String imgType = Files.probeContentType(source); //파일 MIME 정보 받아오기
			
			if (imgType.equals("image/jpeg") || imgType.equals("image/jpg") || imgType.equals("image/png") || imgType.equals("image/bmp")) {
				try {
					upload.transferTo(file);
				}catch (IOException e) {
					e.printStackTrace();
				}
			} else {
				img_check="false"; //실패가 떨어지면 false;
			}
		} 
		model.addAttribute("file_path", Const.PATH_CSD + filename); 
		model.addAttribute("CKEditorFuncNum", CKEditorFuncNum); 
		model.addAttribute("img_check", img_check); 

		return "/csd/ckedtior_fileupload";
	}

Const.PATH_ROOT ,Const.PATH_CSD 해당 업로드 경로니깐 확인하시고 맞게 세팅해주면 될거갔습니다.

upload 한 파일에 정보를 오고 getCKEditorFuncNum editor가 몇번째 위치 하는 num을 가지고 옵니다

public class CkEditorVO {
	private static String attach_path; 
	private static MultipartFile upload; 
	private static String filename; 
	private static String CKEditorFuncNum;
	
	public static String getAttach_path() {
		return attach_path;
	}
	public static void setAttach_path(String attach_path) {
		CkEditorVO.attach_path = attach_path;
	}
	public static MultipartFile getUpload() {
		return upload;
	}
	public static void setUpload(MultipartFile upload) {
		CkEditorVO.upload = upload;
	}
	public static String getFilename() {
		return filename;
	}
	public static void setFilename(String filename) {
		CkEditorVO.filename = filename;
	}
	public static String getCKEditorFuncNum() {
		return CKEditorFuncNum;
	}
	public static void setCKEditorFuncNum(String cKEditorFuncNum) {
		CKEditorFuncNum = cKEditorFuncNum;
	}
}

필요하시는분들이 있을까해서 CkEditorVO 공유 해드립니다. 

저는 VO 담아서 가져옵니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<%@ include file="/WEB-INF/include/head.jsp"%>

file_path가 틀리면 오류가 뱉으니 참고하시길 바랍니다. ex)풀경로를 쓰면 안됩니다.

이상 ckeditor 파일업로드 구현 이었습니다.