[JavaScript] CKEditor4 사용하기 2 (적용 및 이미지 업로드)

반응형

- 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 정보와

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

---

---

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

반응형

저작자표시