메뉴 건너뛰기

조회 수 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();

}



  1. 전자정부 표준프레임워크 파일업로드용량설정

    Date2018.12.06 Views1891
    Read More
  2. 이클립스에서 인코딩 설정

    Date2018.06.21 Views2330
    Read More
  3. Spring Security의 동작 방법

    Date2018.06.21 Views4263
    Read More
  4. 이클립스 파일 찾기 & 문자열 검색

    Date2018.06.21 Views2405
    Read More
  5. CKEditor 사용 및 파일 업로드 적용

    Date2018.06.12 Views3165
    Read More
  6. spring ckeditor 파일업로드 예제 (file upload)

    Date2018.06.12 Views4513
    Read More
  7. 스프링 CKEditor 적용 - 에디터

    Date2018.06.12 Views5569
    Read More
  8. 전자정부프레임워크 사용 중 중복 저장 방지 (새로고침 혹은 뒤로가기시)

    Date2018.06.12 Views3053
    Read More
  9. "알 수 없는 오류가 발생하였습니다." 라는 에러 메시지가 발생했을 때 대처법

    Date2018.06.12 Views4137
    Read More
  10. 예제 따라하기(1) - 기본 서블릿 구현

    Date2018.06.05 Views2922
    Read More
  11. 첫 실행 URL 변경

    Date2018.06.05 Views2715
    Read More
  12. 전자정부프레임워크 구조 파악하기

    Date2018.06.02 Views4117
    Read More
  13. 전자정부 프레임워크(eGovframe) 동적 웹프로젝트 시작하기(2)

    Date2017.09.12 Views4165
    Read More
  14. 전자정부 프레임워크(egov framework) 설치하기(1)

    Date2017.09.12 Views5296
    Read More
  15. java.lang.NoClassDefFoundError: org/springframework/dao/support/PersistenceExceptionTranslator

    Date2016.09.21 Views4160
    Read More
  16. HTMLTagFilter ?

    Date2016.09.21 Views7747
    Read More
  17. 로그인 체크 인터셉터 사용 (AuthenticInterceptor)

    Date2016.09.21 Views6674
    Read More
  18. getFileNames() 메소드를 이용한 파일 업로드 기능 구현하기

    Date2016.09.21 Views5802
    Read More
  19. getFileMap() 메소드를 이용한 파일 업로드 기능 구현하기

    Date2016.09.21 Views6190
    Read More
  20. message 사용을 위한 설정

    Date2016.09.21 Views6550
    Read More
Board Pagination Prev 1 2 3 Next
/ 3

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved