메뉴 건너뛰기

조회 수 35 추천 수 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
번호 제목 날짜 조회 수
22 이클립스에서 인코딩 설정 file 2018.06.21 4
21 Spring Security의 동작 방법 file 2018.06.21 2
20 이클립스 파일 찾기 & 문자열 검색 file 2018.06.21 5
» CKEditor 사용 및 파일 업로드 적용 2018.06.11 35
18 spring ckeditor 파일업로드 예제 (file upload) file 2018.06.11 31
17 스프링 CKEditor 적용 - 에디터 2018.06.11 38
16 전자정부프레임워크 사용 중 중복 저장 방지 (새로고침 혹은 뒤로가기시) 2018.06.11 30
15 "알 수 없는 오류가 발생하였습니다." 라는 에러 메시지가 발생했을 때 대처법 2018.06.11 28
14 예제 따라하기(1) - 기본 서블릿 구현 file 2018.06.04 94
13 첫 실행 URL 변경 file 2018.06.04 78
12 전자정부프레임워크 구조 파악하기 file 2018.06.01 84
11 전자정부 프레임워크(eGovframe) 동적 웹프로젝트 시작하기(2) file 2017.09.12 1141
10 전자정부 프레임워크(egov framework) 설치하기(1) file 2017.09.12 1544
9 java.lang.NoClassDefFoundError: org/springframework/dao/support/PersistenceExceptionTranslator 2016.09.21 1997
8 HTMLTagFilter ? 2016.09.21 2827
7 로그인 체크 인터셉터 사용 (AuthenticInterceptor) 2016.09.21 2919
6 getFileNames() 메소드를 이용한 파일 업로드 기능 구현하기 2016.09.21 2484
5 getFileMap() 메소드를 이용한 파일 업로드 기능 구현하기 2016.09.21 2469
4 message 사용을 위한 설정 2016.09.21 2304
3 공통코드관리 2016.09.21 2538
Board Pagination Prev 1 2 Next
/ 2

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved