[windows] Java - CKEditor4 이미지 업로드 / 외부 폴더에 저장 설정 / 저장한 이미지 불러오기

현재 나는 CKEditor4 버전을 사용 하고 있으며

세부 버전은 4.20.1 이거를 사용 중입니다.

 

게시판 등 글 을 올릴때 CKEditor를 많이 사용 하는데 .. 

쉽게 다운 받고 프로젝트에 넣기만 하면 될 줄 알았는데..

 

이미지 부분은 생각보다 잘 안돼고 안올라가졌음...ㅠ

 

그래도 결국은 성공한 긴 .. 스토리.. 하지만 다른 분들도 저랑 같은 상황이면 보고 하시라고 공유 해드 립니다~!!

 

다들 CKEditor4 설치는 하고 프로젝트에 적용까지는 한걸로 알고 있고

이미지 부분에서 못하고 계신 분만 보시면 될 듯 합니다.

 

그부분만 정리해서... ㅎ

 

지금 다시 생각해보니... 어렵지 않았던거 같음.. 괜히 막 뱅뱅 돌다가... ㅠ 3일정도 걸려서 완성했음...

 

두가지 부분만 보면 될듯 한데

먼저 가장 중요한 server.xml에 <Context> 설정이 중요함!!!

 

나는 windows10 환경과 Linux 환경을 둘 다 하고 있어서

두개다 설정 하는 법 알려드릴게요!

 

먼저 Winodws10 이클립스를 사용 하시는 분!

server.xml을 검색 해서 찾아도 되고

server로 가서 보셔도 됩니다.

 

아래 이미지 경로대로 가던가 or ctrl + shift + R 키 누르고 server 검색 하면 나옴

두가지 방법으로 찾을 수 있음

 

찾아서 들어 갔다면 제일 아래 

<Host> 설정이 있을건데 거기 제일 밑으로 내려가면

<Context docBase="D:\img\info" path="/ckstorage" reloadable="true"/>  

</Engine>가 있을건데 여기 위에다가 위줄에 있는거 적어 주시면 됩니다.

docBase는 이미지가 저장되는 폴더 경로

path는 url중 저 경로가 있으면 저 폴더에서 이미지를 불러오겠다?

뭐 이런거 같음

 

아무튼 server.xml은 이렇게 설정 해주고

 

ckeditor 안에 config.js 폴더 를 확인 해서 이미지 업로드 경로를 로직을 하게 설정 해줘야 함config.filebrowserImageUploadUrl = '/imageUpload.do?type=Images';

위에 소스를 config.js 제일 하단에 넣어줬음

 

난 이렇게 설정 해줬고 java => controller에서 /imageUpload.do받아서 동작 하도록 함

 

java로 하시는 분들은 아래 소스 참고 하시면 됩니다.

@RequestMapping(value = "/imageUpload.do", method = RequestMethod.POST)
public void uploadimg(HttpServletRequest request,HttpServletResponse response, MultipartFile upload) 
	throws Exception {
        //인코딩 설정
        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json");

        //파일 이름 가져오기
        String fileName = upload.getFileName

        //파일을 바이트 배열로 변환
        byte[] bytes=upload.getBytes();

        //파일 저장 path
        String fileSavePath = "";
	fileSavePath += "http://localhost:8080/ckstorage/" +  fileName;
        
        String uploadPath = request.getSession().getServletContext().getRealPath("/").concat("ckstorage");
        // 파일 서버에 저장 = 서버로 내보낸다!!
        OutputStream out = new FileOutputStream(new File(uploadPath + File.separator + fileName));
        //서버에 write
        out.write(bytes);
        out.flush();	//데이터 전송 후 초기화    

        //외부 폴더에 저장 -> 이 폴더 이미지를 사용
        String uploadPath2 = "D:\\img\\info\\";
        File backupYearDir = new File(uploadPath2);
        if (!backupYearDir.exists()) {
            backupYearDir.mkdirs(); // 폴더 생성
        }
        OutputStream out2 = new FileOutputStream(new File(uploadPath2 + File.separator + fileName));
        out2.write(bytes);
        out2.flush(); // 데이터 전송 후 초기화

        //클라이언트에 이벤트 추가 (자바스크립트 실행)
        PrintWriter printWriter=response.getWriter(); //자바스크립트 쓰기위한 도구

        /*
         * 과거에는 callback 해서 값을 받아왔는데, CKEDITOR 버전이 업데이트 되면서
         * JSON 형태로 리턴을 해야한다. 
         */
        JsonObject json = new JsonObject();
        json.addProperty("uploaded", 1);
        json.addProperty("fileName", fileName);
        json.addProperty("url", fileSavePath);
        printWriter.println(json);
        printWriter.flush();
}

 

소스 확인 하고 본인에 맞게 설정 진행하길 바람

 

이렇게 하면 윈도우 이클립스 java를 사용하는 사람들은 windows 폴더에 ckeditor로 이미지 업로드한게 위에 설정한 경로로 저장이 되면서 

 

저장이 되서 /ckstorage로 된 url을 불러오면 아까 server.xml에 설정한 경로로 가서 fileName 찾아서 이미지를 맞게 불러온다.

 

 

확인해볼게요 

ckeditor로 가서 이미지 버튼 클릭 후 

 

업로드 버튼 클릭 후 파일 선택 하기

 

이미지 선택 후 서버로 전송 클릭

 

 

저장된 이미지가 보인다.확인 눌러서 업로드 시켜 주자!!

 

간단하면서 어렵게 아무튼 등록 설정 완료 함...

 

Linux로 java-tomcat CKEDITOR 활용해서 이미지 업로드 하기

[Linux] Java - CKEditor4 이미지 업로드 / 외부 폴더에 저장 설정 / 저장한 이미지 불러오기