CKEditor 이미지 업로드 구현 (AWS S3 활용)

CKEditor 이미지 업로드 구현 (AWS S3 활용)

현재 일을하고 있는 직장에서 서비스 운영을위해 사용하고 있는 내부 관리툴이 있는데, 운영팀에서 현재 CKEditor에 이미지 업로드 기능이 없어서 개발해 주실 수 있냐는 요청을 받게되어서 CKEditor 이미지 업로드를 개발하게 되었습니다.

CKEditor를 모르시는 분들을 위해 화면을 준비하였습니다.

왼쪽에 보이는게 textarea태그인데 CKEditor를 활용하여 모습이 저렇게 변한것을 보실 수 있습니다.

기존에 사용되고 있는 CKEditor는 노란색으로 표시된 이미지버튼을 클릭하면 오른쪽과 같은 팝업이 나왔었습니다.

하지만, 실제로 이미지를 업로드 할 수 있는 기능은 없었기에 이번에 추가하게 된거죠!!

지금부터 코드들을 보면서 정리를 시작해보겠습니다.

프론트엔드

CKEditor을 사용하기위해서는 CKEditor사이트에서 js파일을 다운받아 프로젝트로 가져와도 되지만, 저는 CDN방식으로 진행을 하였습니다.

그리고 다른분들의 블로그를 살펴보니 CKEDITOR.replace(~~)를 jsp파일안에 같이 포함하여 진행을 하였지만, 현재 직장에서 진행하고 있는 프로젝트는 CKEDITOR.replace(~~)부분을 별도의 js파일로 빼고 개발을 하였습니다.

// 1. CKEditor CDN방식 --------------------------------------------------------------------- // 2. 다른 블로그에서 소개해주는 방식 $(function(){ CKEDITOR.replace('bo_content',{ filebrowserUploadUrl: '${pageContext.request.contextPath }/adm/fileupload.do' }); }); --------------------------------------------------------------------- // 3. 진행하는 프로젝트 방식(.js파일로 처리) var ckeditorConfig = { toolbar: this.toolbar, language: this.language, height: this.height, extraPlugins: this.extraplugins, allowedContent: true, // 업로드를 할 수 있는 탭이 생김 // Controller를 호출할 경로를 적음 filebrowserUploadUrl: '/ckeditor/fileUpload' }; // ckeditorId는 현재 textarea의 id값을 입력해야함 CKEDITOR.replace(ckeditorId, ckeditorConfig);

filebrowserUploadUrl을 선언하고 Controller에 매핑된 경로를 넣어주면 업로드를 할 수 있는 탭이 생겼습니다.

정말 사소하지만, 이거 알아내려고 시간 엄청 걸렸습니다. ㅠㅠ

백엔드

이제 파일을 선택하고 Send it to the Server버튼을 클릭하여 이미지를 서버를 통해 저장하고, 저장된 이미지의 경로를 가지고 화면에 출력해주는 기능을 구현해보려고 합니다.

다른 블로그에서 이미지를 저장하는 방식은 로컬PC에 저장하여 포스팅을 하였지만, 저는 현재진행중인 프로젝트에서 AWS S3에 이미지를 저장하고 있기때문에, S3에 저장하고 이미지 경로를 가져와서 출력하는 방식으로 포스팅을 하려고 합니다.

위 이미지처럼 파일을 선택하고 Send it to the Server버튼을 누르면 filebrowserUploadUrl : '/ckeditor/fileUpload'로 매핑된 Controller로 진입하게 됩니다. 해당 코드와 설명을 보시죠!!

@RequestMapping(value="/ckeditor/fileUpload", method=RequestMethod.POST) @ResponseBody public String fileUpload(HttpServletRequest req, HttpServletResponse resp, MultipartHttpServletRequest multiFile) throws Exception { JsonObject json = new JsonObject(); PrintWriter printWriter = null; MultipartFile file = multiFile.getFile("upload"); if(file != null){ if(file.getSize() > 0 && StringUtils.isNotBlank(file.getName())){ try{ // 날짜 및 S3경로 생성 LocalDate now = LocalDate.now(); DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyyMMdd"); String date = now.format(formatter); String uploadPath = "admin/editor/"+date; // S3업로드(upload메소드는 S3에 저장된 이미지 URL을 반환) String resultImageUrl = s3Uploader.upload(file, uploadPath); // 출력하기위한 데이터 가공 int index = resultImageUrl.lastIndexOf("/"); String fileName = resultImageUrl.substring(index+1); printWriter = resp.getWriter(); resp.setContentType("text/html"); // 츨력 - json 데이터로 등록(이런 형태로 리턴이 나가야함.) // {"uploaded" : 1, "fileName" : "test.jpg", "url" : "/img/test.jpg"} json.addProperty("uploaded", 1); json.addProperty("fileName", fileName); json.addProperty("url", resultImageUrl); printWriter.println(json); }catch(IOException e){ e.printStackTrace(); }finally{ if(printWriter != null){ printWriter.close(); } } } } return null; }

이 포스팅은 CKEditor에 어떻게 올리는지 정리하는 글이기 때문에 S3에 업로드 하는 upload메소드는 설명하지 않습니다. S3업로드 방법은 개인적으로 찾아보시면 될 것 같습니다. 아 그리고 CKEditor 4.9.0버전 이상부터는 화면에 출력할때 json형식으로 출력해야 한다고 합니다. 문서에 그렇게 나와있더라구요 ㅎㅎ

아무튼 이미지가 해당 경로에 저장되고 그 경로를 가지고 이미지를 출력하면 아래와 같이 image info탭으로 이동합니다.

그리고 ok버튼을 누르게되면........???? 아래와 같이 textarea에 이미지가 들어가는 것을 볼 수 있습니다.

from http://gong-story.tistory.com/16 by ccl(A) rewrite - 2021-11-10 22:01:56