메뉴 건너뛰기

조회 수 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 첫 실행 URL 변경 file 2018.06.05 2715
42 전자정부프레임워크 설치 및 실행 file 2018.12.07 1381
41 전자정부프레임워크 사용 중 중복 저장 방지 (새로고침 혹은 뒤로가기시) 2018.06.12 3053
40 전자정부프레임워크 구조 파악하기 file 2018.06.02 4117
39 전자정부표준프레임워크 파일 업로드 크기 설정(feat. MaxUploadSizeExceededException) file 2019.02.28 1101
38 전자정부 프레임워크(eGovframe) 동적 웹프로젝트 시작하기(2) file 2017.09.12 4165
37 전자정부 프레임워크(egov framework) 설치하기(1) file 2017.09.12 5296
36 전자정부 표준프레임워크 파일업로드용량설정 file 2018.12.06 1891
35 이클립스에서 인코딩 설정 file 2018.06.21 2330
34 이클립스(Eclipse) 한글 언어팩 설치. Babel 프로젝트 file 2018.12.07 1199
33 이클립스(Eclipse) 소스 일괄 수정 file 2018.12.07 1097
32 이클립스 파일 찾기 & 문자열 검색 file 2018.06.21 2405
31 예제 따라하기(1) - 기본 서블릿 구현 file 2018.06.05 2922
30 스프링프레임워크 <form:form> 태그 사용법 file 2018.12.06 1182
29 스프링프레임워크 <form:form> 태그 사용법 file 2019.02.28 3514
28 스프링 CKEditor 적용 - 에디터 2018.06.12 5569
27 서버로부터 메시지 받아서 팝업 띄우기 (1. ModelAndView 이용) file 2021.03.09 574
26 로그인 체크 인터셉터 사용 (AuthenticInterceptor) 2016.09.21 6674
25 공통코드관리 2016.09.21 5760
24 개발자로서 기본 구성합니다. file 2016.08.18 4937
Board Pagination Prev 1 2 3 Next
/ 3

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved