메뉴 건너뛰기

조회 수 3165 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

CKEditor 사용 및 파일 업로드 적용

1. CKEditor 다운

 

- DOWNLOAD URL

http://ckeditor.com/ 에서 다운로드

 

- 설치 위치

webapp 밑에 copy

 

- JSP 설정

<script src="${pageContext.request.contextPath}/js/ckeditor/ckeditor.js"></script>

 

<textarea name="contents" id="contents" rows="50" cols="10">

                

</textarea>

<script>

// Replace the <textarea id="editor1"> with a CKEditor

// instance, using default configuration.

CKEDITOR.replace( 'contents', {

filebrowserUploadUrl: '${pageContext.request.contextPath}/file/ckeditorImageUpload.do'

});

</script>

 

filebrowserUploadUrl 을 설정을 해주어야 사진 업로드 시 업로드 탭이 생겨 사진파일을 업로드 할 수 있다.

그렇지 않으면 CKFinder를 사용하여 적용 시켜주어야 한다.

 

- 사진 업로드 구현 Servlet

Controller

@RequestMapping(value="/file/ckeditorImageUpload.do", method=RequestMethod.POST)

public void ckeditorImageUpload(HttpServletRequest request, HttpServletResponse response, @RequestParam MultipartFile upload) throws     Exception {

 

response.setCharacterEncoding("UTF-8");

response.setContentType("text/html;charset-utf-8");

 

try {


fileService.ckeditorImageUpload(request, response, upload);

 

} catch (IOException e) {

e.printStackTrace();

}

}

 

Service Impl

@SuppressWarnings("resource")

public void ckeditorImageUpload(HttpServletRequest request, HttpServletResponse response, MultipartFile file) throws Exception {

OutputStream out = null;

PrintWriter printWriter = null;

String fileName = file.getOriginalFilename();

byte[] bytes = file.getBytes();

String uploadPath = FILE_URL + "\" + fileName;

 

System.out.println(uploadPath);

out = new FileOutputStream(new File(uploadPath));

out.write(bytes);

String callback = request.getParameter("CKEditorFuncNum");

 

printWriter = response.getWriter();

String fileUrl = request.getContextPath()+SAVE_URL + "/" +fileName; //url 경로

 

printWriter.println("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("

               + callback

               + ",'"

               + fileUrl

               + "','이미지를 업로드 하였습니다.'"

               + ")</script>");

       printWriter.flush();

}



List of Articles
번호 제목 날짜 조회 수
43 Aspect 어노테이션 사용을 위한 설정. file 2016.08.18 5019
42 개발자로서 기본 구성합니다. file 2016.08.18 4937
41 공통코드관리 2016.09.21 5760
40 message 사용을 위한 설정 2016.09.21 6550
39 getFileMap() 메소드를 이용한 파일 업로드 기능 구현하기 2016.09.21 6190
38 getFileNames() 메소드를 이용한 파일 업로드 기능 구현하기 2016.09.21 5802
37 로그인 체크 인터셉터 사용 (AuthenticInterceptor) 2016.09.21 6674
36 HTMLTagFilter ? 2016.09.21 7747
35 java.lang.NoClassDefFoundError: org/springframework/dao/support/PersistenceExceptionTranslator 2016.09.21 4160
34 전자정부 프레임워크(egov framework) 설치하기(1) file 2017.09.12 5296
33 전자정부 프레임워크(eGovframe) 동적 웹프로젝트 시작하기(2) file 2017.09.12 4165
32 전자정부프레임워크 구조 파악하기 file 2018.06.02 4117
31 첫 실행 URL 변경 file 2018.06.05 2715
30 예제 따라하기(1) - 기본 서블릿 구현 file 2018.06.05 2922
29 "알 수 없는 오류가 발생하였습니다." 라는 에러 메시지가 발생했을 때 대처법 2018.06.12 4137
28 전자정부프레임워크 사용 중 중복 저장 방지 (새로고침 혹은 뒤로가기시) 2018.06.12 3053
27 스프링 CKEditor 적용 - 에디터 2018.06.12 5569
26 spring ckeditor 파일업로드 예제 (file upload) file 2018.06.12 4513
» CKEditor 사용 및 파일 업로드 적용 2018.06.12 3165
24 이클립스 파일 찾기 & 문자열 검색 file 2018.06.21 2405
Board Pagination Prev 1 2 3 Next
/ 3

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved