반응형

- CKEditor4 적용 및 이미지 업로드 사용하기 -


CKEditor를 사용하면서 이미지관련돼서 좀 헤맸는데 한번 알아보도록하자.

 

앞서 설치 및 다운로드까지 완료하여 불러오기까지 됐다면

 

<textarea> 태그를 가지고 바로 적용시켜보자.

 

<textarea id = "editor4" name = "editor4"></textarea>
<script>CKEDITOR.replace('editor4');</script>

이런식으로 선언해주면 아래와같은 화면이 나오며

바로 사용이 가능하다.

 

사실 여러 사용 방법이 있을수 있지만

나는 이 방법밖에 모른다.



이제 여기서 작성한 내용은

CKEditor가 제공해주는 메서드를 통해 저장하고 불러올 수 있지만

 

나같은 경우에는 그냥 에디터 모양만 빌려오고

내용은 따로 DB에 저장해두는 방향으로 하였다.

 

여기서 추가적으로

 

본문내용과 함께 이미지를 함께 실어서 저장하고싶다라고 한다면

구현이 필요하다.

 

위에서 작성한 코드를 약간 수정해주자.

 

<textarea id = "editor4" name = "editor4"></textarea>
<script>CKEDITOR.replace('editor4',{filebrowserUploadUrl:'/mine/imageUpload.do'});</script>

 

이제

이미지를 저장할 imageUpload.do

그리고 저장한 이미지를 화면에 뿌려줄 ckImgSubmit

 

이 두개의 url을 이용하도록하자.


▷이미지 업로드

/**
     * @param multiFile
     * @param request
     * @return
     * @throws Exception
     */
    @RequestMapping(value="/mine/imageUpload.do", method = RequestMethod.POST)
    public void imageUpload(HttpServletRequest request,
            HttpServletResponse response, MultipartHttpServletRequest multiFile
            , @RequestParam MultipartFile upload) throws Exception{
        // 랜덤 문자 생성
        UUID uid = UUID.randomUUID();
        
        OutputStream out = null;
        PrintWriter printWriter = null;
        
        //인코딩
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        
        try{
            
            //파일 이름 가져오기
            String fileName = upload.getOriginalFilename();
            byte[] bytes = upload.getBytes();
            
            //이미지 경로 생성
            String path = fileDir.getPath() + "ckImage/";// fileDir는 전역 변수라 그냥 이미지 경로 설정해주면 된다.
            String ckUploadPath = path + uid + "_" + fileName;
            File folder = new File(path);
            
            //해당 디렉토리 확인
            if(!folder.exists()){
                try{
                    folder.mkdirs(); // 폴더 생성
                }catch(Exception e){
                    e.getStackTrace();
                }
            }
            
            out = new FileOutputStream(new File(ckUploadPath));
            out.write(bytes);
            out.flush(); // outputStram에 저장된 데이터를 전송하고 초기화
            
            String callback = request.getParameter("CKEditorFuncNum");
            printWriter = response.getWriter();
            String fileUrl = "/mine/ckImgSubmit.do?uid=" + uid + "&fileName=" + fileName;  // 작성화면
            
        // 업로드시 메시지 출력
          printWriter.println("{\"filename\" : \""+fileName+"\", \"uploaded\" : 1, \"url\":\""+fileUrl+"\"}");
          printWriter.flush();
            
        }catch(IOException e){
            e.printStackTrace();
        } finally {
          try {
           if(out != null) { out.close(); }
           if(printWriter != null) { printWriter.close(); }
          } catch(IOException e) { e.printStackTrace(); }
         }
        
        return;
    }

 

▷CKEditor 서버로 전송된 이미지 뿌려주기

  /**
     * cKeditor 서버로 전송된 이미지 뿌려주기
     * @param uid
     * @param fileName
     * @param request
     * @return
     * @throws ServletException
     * @throws IOException
     */
    //
    @RequestMapping(value="/mine/ckImgSubmit.do")
    public void ckSubmit(@RequestParam(value="uid") String uid
                            , @RequestParam(value="fileName") String fileName
                            , HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException{
        
        //서버에 저장된 이미지 경로
        String path = fileDir.getPath() + "ckImage/";
    
        String sDirPath = path + uid + "_" + fileName;
    
        File imgFile = new File(sDirPath);
        
        //사진 이미지 찾지 못하는 경우 예외처리로 빈 이미지 파일을 설정한다.
        if(imgFile.isFile()){
            byte[] buf = new byte[1024];
            int readByte = 0;
            int length = 0;
            byte[] imgBuf = null;
            
            FileInputStream fileInputStream = null;
            ByteArrayOutputStream outputStream = null;
            ServletOutputStream out = null;
            
            try{
                fileInputStream = new FileInputStream(imgFile);
                outputStream = new ByteArrayOutputStream();
                out = response.getOutputStream();
                
                while((readByte = fileInputStream.read(buf)) != -1){
                    outputStream.write(buf, 0, readByte);
                }
                
                imgBuf = outputStream.toByteArray();
                length = imgBuf.length;
                out.write(imgBuf, 0, length);
                out.flush();
                
            }catch(IOException e){
                logger.info(e);
            }finally {
                outputStream.close;
                fileInputStream.close;
                out.close;
            }
        }
    }

검색해가며 구현한거라

정확한 설명은 어렵고

 

위와같이 선언해두면 이제 기능은 잘 작동한다.

실제 사용방법에 대해 아래서 알아보자.



우선 이미지 버튼을 클릭하자.



파일을 업로드하고

"서버로 전송" 버튼을 꼭 눌러줘야한다.



그러면 이제 자동으로 [이미지 정보] 탭으로 넘어가지며

여기서 URL 정보와

이미지 제어를 위한 너비,높이 등 설정이 가능하다.



그러면 이제 위와같이 본문에 이미지가 같이 출력되게 할 수 있다.

반응형
  1. BlogIcon 냠냠:) 2020.08.27 21:42 신고

    fileDir을 뭘로 설정해줘야하죠?

    • BlogIcon 썸머워즈 2020.08.27 21:54 신고

      이미지 저장되어있는 경로 적어주시면 됩니다!

    • BlogIcon 냠냠:) 2020.08.28 16:16 신고

      업로드할 이미지가 저장되있는 경로 말씀하시는건가요?

    • BlogIcon 썸머워즈 2020.08.28 18:49 신고

      아 아뇨 죄송해요 잘못 적었네요 이미지 저장할 경로 적어주시면 됩니다 죄송해요 ㅠ 위 본문에는 fileDir.getPath()라고 썼는데 이거 사용하실필요없이 어차피 String변수라 직접 이미지 저장할 경로 적어주셔서 사용하시면 됩니다

    • BlogIcon 냠냠:) 2020.08.30 00:57 신고

      앗 감사합니다. 혹시 C:/ 부터 시작하는 절대경로를 사용해도 상관없겠죠??

    • BlogIcon 썸머워즈 2020.08.30 14:04 신고

      네네 아마 상관 없을거에요 본문에서 사용한것도 FileSystemResource 에 경로 넣어서 사용하고있는거라 저는 "D:/ ~ " 이런식으로 D드라이브에 경로 해놓고 사용했습니다.

  2. 김또깡 2020.09.17 16:11

    좋은정보 감사합니다! 궁금한게
    작성한 글과 이미지를 어떻게 db에 연결해서 다시 뿌려주나요?

    • BlogIcon 썸머워즈 2020.09.18 21:29 신고

      에디터는 에디터일 뿐이고 실제 사용은 일반적인 게시글 사용과 동일합니다.
      일반적으로 연결되어있는 db에 글 제목, 내용들을 넣고 파일 관련 테이블에 파일경로를 비롯한 정보들을 넣어두고 읽어오는 형식으로 사용하곤 하는데
      같은 방식으로 그대로 사용하셔도 무방합니다!

  3. BlogIcon 터프남 2020.11.04 17:13 신고

    감사합니다!

  4. BlogIcon 찌서니 2022.01.14 16:11 신고

    덕분에 너무 많은 도움이 됐습니다!
    프로젝트 기록용으로 글을 올리고 있는데,
    혹시 블로그에 소스 올려두 괜찮을까용???