[ckeditor] spring boot + jsp에 글쓰기 플러그인 적용(이미지경로 설정)

 

서론

 

지금 하는 프로젝트에 위지윅 에디터를 적용할 생각입니다.

적용하는 부분은 쉬웠지만 이미지 경로 때문에 며칠을 날려버렸습니다.

원래는 이미지 파일을 이클립스 외부에 저장하고 가져올 생각이었지만

길고 긴시행착오 끝에 이클립스 내부에 저장시키는 방법으로 적용하였습니다.

 

위지윅 에디터

위의 사이트에서 다운로드하셔서 적용시키시면 됩니다. cdn으로 적용시키기보단 프로젝트를 만들 때에는 최대한 오류를 지양하기 위해 직접 다운 받아서 적용시키는 것을 추천합니다.

 

 

 

<script src="/resources/ckeditor/ckeditor.js"></script>

다운 받으신 후 위와 비슷한 경로에 넣어 주시고 html에 적용시켜 줍시다.

 

 

		<div class="inputArea">
                        <label for="gdsDes">상품소개</label>
                        <textarea rows="5" cols="50" id="gdsDes" name="gdsDes"></textarea>
                        <script>
						 var ckeditor_config = {
						   resize_enaleb : false,
						   enterMode : CKEDITOR.ENTER_BR,
						   shiftEnterMode : CKEDITOR.ENTER_P,
						   filebrowserUploadUrl : "${pageContext.request.contextPath}/admin/goods/ckUpload"
						 };
						 
						 CKEDITOR.replace("gdsDes", ckeditor_config);
						</script>
                    </div>

Json형태의 변수인 ckeditor_config를 선언 및 설정하고,

마지막 줄의 코드 CKEDITOR.replace([텍스트에어리어의 ID, 변수]) 빠뜨리지 말고 잘 적용해 줍시다.

 

 

 

이제는 문제의 이미지 경로 입니다.

일단은 jsp에서

<%=request.getRealPath("/") %>

 

위와 같이 한번 뽑아봅시다

그럼 자신의 현재 프로젝트의 실제 경로를 표시합니다. 스프링 파일이 저장되는 워크스페이스와 다르므로, 파일을 저장할 때 실제 경로를 알아야 합니다.

 

 

뽑아보시면 감이 잡히실 겁니다.

1. 이클립스 내에 폴더 생성 

2. 생성한 폴더에 경로 이어 주기

 

저는 getRealPath("/") 결과 webapp 폴더까지의 경로가 나왔습니다.

그러므로 webapp -> resources -> ckUplaod 폴더를 생성하겠습니다.

 

 

springboot는 spring과 달리 servlet-context가 없어 따로 설정 파일을 만들어야 합니다. 

이것 때문에 한참을 헤맸습니다.

 

 

config 패키지를 하나 만들어 WebConfig.class를 만들어 줍시다.

 

 

 

WebConfig.class

 

@Configuration
public class WebConfig implements WebMvcConfigurer {
	
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
    	 // /ckUpload/** 은 /resources/ckUpload/ 으로 시작하는 uri호출은 /resources/ckUpload/ 경로 하위에 있는 리소스 파일이다 라는 의미입니다.
        registry.addResourceHandler("/ckUpload/**")
				.addResourceLocations("/resources/ckUpload/");
        
        //다른 이미지 업로드를 위한 경로
        registry.addResourceHandler("/images/**")
        		.addResourceLocations("/resources/images/");
        registry.addResourceHandler("/ckUpload/**")
				.addResourceLocations("/resources/ckUpload/");
    }
}

다른 이미지업로드가 필요할 경우 추가로 설정해 줍니다.

 

 

 

 

            그리고 물론 db에는 /ckUpload/로 시작해야 위에서 해준 설정들이 잘 적용이 되겠죠?

 

 

 

Controller.class

 

// ck 에디터에서 파일 업로드
	@PostMapping("/admin/goods/ckUpload")
	public void postCKEditorImgUpload(HttpServletRequest req, HttpServletResponse res, @RequestParam MultipartFile upload) throws Exception {
	 logger.info("post CKEditor img upload");
	 
	 String uploadPath = req.getSession().getServletContext().getRealPath("/").concat("resources");
	 System.out.println("uploadPath  : "+uploadPath);
	 // 랜덤 문자 생성
	 UUID uid = UUID.randomUUID();
	 
	 OutputStream out = null;
	 PrintWriter printWriter = null;
	   
	 // 인코딩
	 res.setCharacterEncoding("utf-8");
	 res.setContentType("application/json");
	 
	 try {
	  
	  String fileName =  upload.getOriginalFilename(); // 파일 이름 가져오기
	  byte[] bytes = upload.getBytes();
	  
	  // 업로드 경로
	  String ckUploadPath = uploadPath + File.separator + "ckUpload" + File.separator + uid + "_" +fileName;
	  
	  out = new FileOutputStream(new File(ckUploadPath));
	  out.write(bytes);
	  out.flush(); // out에 저장된 데이터를 전송하고 초기화
	  
	  //String callback = req.getParameter("CKEditorFuncNum");
	  printWriter = res.getWriter();
	  String fileUrl = "/ckUpload/" + uid + "_" +fileName; // 작성화면
	  // 업로드시 메시지 출력
	  JsonObject json = new JsonObject();
	  json.addProperty("uploaded", 1);
	  json.addProperty("fileName", fileName);
	  json.addProperty("url", fileUrl);
	  printWriter.println(json);
	  
	  printWriter.flush();
	  System.out.println("test url : "+req.getSession().getServletContext().getRealPath("resouces/ckUpload"));
	  System.out.println("url : "+fileUrl);
	  System.out.println("ckUploadPath : "+ckUploadPath);
	 } catch (IOException e) { e.printStackTrace();
	 } finally {
	  try {
	   if(out != null) { out.close(); }
	   if(printWriter != null) { printWriter.close(); }
	  } catch(IOException e) { e.printStackTrace(); }
	 }
	 
	 return; 
	}

 

 

 

 

+@ 자료를 찾다 보니 properties에서 적은 내용을 class 내로 가져오는 방식도 있어 적어봅니다.

 

application.properties

 

//이 부분은 아무거나 원하는 이름을 입력해도 된다
custom.ckuplaod.url="위즈윅 플로그인 이미지를 저장할 폴더url"

 

Controller

 

@Value("${custom.ckuplaod.url}")
	private String url;

그리고 system.out.println으로 url을 뽑아보면 값이 나올 것이다.

그렇다면 이로 얻는 이득은 무엇이냐?

보안성, 공통의 url로 쓰일 수 있다는 편리성이 있다.

 

 

 

도움이 된 블로그

https://junjangsee.github.io/2019/05/02/spring/spring-07/

SpringBoot - Configuration(외부설정) | Junjangsee's Blog

https://kuzuro.blogspot.com/2018/10/13.html

스프링 쇼핑몰 만들기 #13. 위지윅(WYSIWYG) 에디터 적용