#CKEditor #이미지업로드

#CKEditor #이미지업로드 # 전자정부프레임워크 # 공통컴포넌트

다운로드 & 적용 & 설정

↓

참고

https://blog.naver.com/callsonda/220303373831

#전자정부프레임워크 #공통컴포넌트

#이미지 업로드  

config.js에서

CKEDITOR.editorConfig = function( config ) {

}

안에

config.filebrowserUploadUrl = '${pageContext.request.contextPath}/utl/wed/insertImage.do';

를 추가해준다.

${pageContext.request.contextPath} 가 오류가 날때는 

오류 메시지를 보고 

자신이 사용하고 있는 webserver path를 확인하여 쓴다.

----------------------------------------------------------------------------------------------------------------------------------

여기까지 하면

이미지업로드 하기 위해 이미지버튼을 눌렀을때 

업로드 탭이 생기게 된다.

파일선택후 서버로 전송 버튼을 눌렀을때 수행되는 사항은

config.filebrowserUploadUrl  넣은 값에 

Mapping되는 Controller에서 

로직을 수행하게 된다.

controller

/**
     * 이미지 Upload를 처리한다.
     *
     * @param request
     * @param model
     * @return
     * @throws Exception
     */
    @RequestMapping(value="/utl/wed/insertImage.do", method=RequestMethod.POST)
    public String imageUpload(HttpServletRequest request, Model model,@RequestParam(value="CKEditorFuncNum", required=false) String CKEditorFuncNum) throws Exception {
    // Spring multipartResolver 미사용 시 (commons-fileupload 활용)
    //List<EgovFormBasedFileVo> list = EgovFormBasedFileUtil.uploadFiles(request, uploadDir, maxFileSize);
 
    // Spring multipartResolver 사용시
    List<EgovFormBasedFileVo> list = EgovFileUploadUtil.uploadFiles(request, uploadDir, maxFileSize);
 
    if (list.size() > 0) {
        EgovFormBasedFileVo vo = list.get(0);    // 첫번째 이미지
 
        String url = request.getContextPath()
        + "/utl/web/imageSrc.do?"
        + "path=" + vo.getServerSubPath()
        + "&physical=" + vo.getPhysicalName()
        + "&contentType=" + vo.getContentType();
 
        //model.addAttribute("CKEditorFuncNum", request.getParameter("CKEditorFuncNum"));
        model.addAttribute("CKEditorFuncNum", CKEditorFuncNum);
        model.addAttribute("url", url);
    }
 
    return "egovframework/com/utl/wed/EgovInsertImage";
    }

로직을 수행하고 나면

return 에서 설정한 jsp페이지로 이동하게 된다.

jsp로 이동하기 전에 여기서 중요한 점은

인자값을 받는

@RequestParam(value="CKEditorFuncNum", required=false) String CKEditorFuncNum

이 부분이다.

CKEditorFuncNum 은 이미지를 '서버로 전송'하면 ckeditor에서 전달하는 값이다

model.addAttribute("CKEditorFuncNum", CKEditorFuncNum);

값을 받고 model에 저장한다.

결과 jsp에서는

다른것은 다 필요없고

<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction('${CKEditorFuncNum}', '${url}', '파일 전송 완료.'); 
</script>

이 코드만 있으면 된다.

controller에서 

 model.addAttribute("CKEditorFuncNum", CKEditorFuncNum);

 model.addAttribute("url", url);

이 코드를 통해 저장을 하고

jsp에서

${CKEditorFuncNum}

${url}

을 통해 가져온다.

이렇게 하면 이미지 업로드가 완료된다.

번외편(의문점)

1. 전자정부프레임워크상의 ckeditor에서 글자색깔을 바꾸거나 다른 설정을 바꾸면 

ㅈ저는

ㅇ안녕하세요

이런식으로 글자가 중복된다.

->

일정버전이하에서 나오는 오류로서

새로운 버젼으로 교체시 오류는 나지 않으나 

위의 방식대로 이미지업로드를 할때 안되는것도 있었던것 같음