[LifeSoft] spring 19강 Smart Editor(CKEditor, SummerNote)

12. Smart Editor

가. Smart Editor

WYSIWYG Editor (위지윅 에디터, what yout see is what you get)

- 사용자가 현재 화면에서 모고 있는 내용과 동일한 html codr를 생성하는 에디터

- 네이버. 다음 에디터, CKEditor(자바 쪽 많이씀), SummerNote 등

나. CKEditor

- http://ckeditor.com

- 현재 CKEditor5 버전이 최신 버전이지만 여기서는 안정화된 버전인

CKEditor 4.11.2 버전으로 실습함

- 이미지 업로드를 위해서는 별도의 작업이 필요함

- 적용 예

게시물 작성

ckeditor 홈페이지에서 download - https://ckeditor.com/ckeditor-4/download/

Standard Package 다운로드

압축해제 후 ckeditor 폴더를 views 밑에 붙인다.

그리고 외부에서 views 이하 폴더를 접근하면

servlet으로 인식해서 404에러가 뜬다.

다. CKEditor 실습예제

1)context-servlet.xml 에 리소스 매핑 추가

2) ckeditor.js 참조

3) ckeditor를 적용할 태그에 작성

WEB-INF/views/shop/product_write.jsp와 product_edit.jsp에 적용 테스트

// 이미지 업로드를 할 경우

CKEDITOR.replace("description",{

filebrowserUploadUrl : "${path}/imageUpload.do"

});

</script>

4) controller.upload.ImageUploadController.java

@Controller //현재 클래스를 컨트롤러 빈(bean)으로 등록
public class ImageUploadController {
private static final Logger logger = LoggerFactory.getLogger(ImageUploadController.class);

@ResponseBody
@RequestMapping("imageUpload.do")
public void imageUpload(HttpServletRequest req,
   HttpServletResponse res,
   @RequestParam MultipartFile upload) throws Exception {

  res.setCharacterEncoding("utf-8"); // http header 설정 (브라우저에 인코딩 지정)
  res.setContentType("text/html; charset=utf-8");
  // http body 설정
  String fileName = upload.getOriginalFilename(); // 업로드한 파일 이름
  byte[] bytes = upload.getBytes(); // 바이트 배열로 변환
  //이미지를 업로드할 디렉토리(배포 경로로 설정)
  String uploadPath = "D:\\workspace-softlife\\.metadata\\.plugins\\org.eclipse.wst.server.core\\tmp5\\wtpwebapps\\spring02\\WEB-INF\\views\\images\\";
  OutputStream out = new FileOutputStream(new File(uploadPath+fileName)); // java.io | 파일을 output stream 으로 만들고
  out.write(bytes); // 서버에 저장됨

  String callback = req.getParameter("CKEditorFuncNum"); // CKEditorFuncNum는 에디터 내부에서 쓰는 이름
  PrintWriter printWriter = res.getWriter();
  String fileUrl = req.getContextPath()+"/images/"+fileName;
  System.out.println("fileUrl===="+fileUrl);
  printWriter.println(
    "<script>window.parent.CHEDITOR.tools.callFunction("
    + callback +", '"+fileUrl+"','이미지가 업로드 되었습니다.')"
    + "</script>" );

  printWriter.flush(); //스트림 닫기
}
}

에러가 발생할 경우

ckeditor/config.js 파일을 열고 마지막 라인에 추가

config.filebrowserUploadMethod='form';

이미지 파일이 성공적으로 업로드가 되었으면

수정모드에서 소스버튼을 클릭하면 아래와 같다

파일만 따로 배포 폴더에 올리고 링크만 걸려있는 방식임을 알 수 있다.

개발디렉토리

D:\workspace-softlife\spring02\src\main\webapp\WEB-INF\views\images

배포디렉토리 (확인은 HomeController에 코드가 있음)

D:\workspace-softlife\.metadata\.plugins\org.eclipse.wst.server.core\tmp5\wtpwebapps\spring02\ 여기에 WEB-INF\views\images를 붙인다.

실제 코드에서는 이스케이프('\')를 써서 \\ 이런 표기로 된다.

String uploadPath = "D:\\workspace-softlife\\.metadata\\.plugins\\org.eclipse.wst.server.core\\tmp5\\wtpwebapps\\spring02\\WEB-INF\\views\\images\\""

라. SummerNote

- http://summernote.org

- 이미지를 텍스트 형식으로 저장함

- 우리나라 개발자가 개발함.

- 다운로드 - 압축해제 - dist 폴더를 views 폴더에 붙여넣고 이름을 summernote로 변경

라. SummerNote

1) servlet-context.xml 에 리소스 매핑 추가

2) product_write.jsp (상품등록페이지에 적용)

https://summernote.org/getting-started/ 에서 아래 내용을 적용

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>


<link href="${path}/summernote/summernote.css" rel="stylesheet">
<script src="${path}/summernote/summernote.js"></script>

$(function(){
//id가 description인 태그를 summernote로 변경
$("#description").summernote({
height: 300, width: 800
});
});

글쓰기시에 이미지버튼 클릭해서 파일을 지정해서 올릴 수 있는데

이미지를 올리는 자바코드가 필요없다

글쓰기 완료 후에 글수정페이지에서 소스보기(코드뷰)를 보면

엄청 복잡하게 되어 있는데

이미지 파일이 업로드 폴더에 올라가는것이 아니라

이미지가 통채로 디비(base64인코딩:2진파일로 저장되는 것을 text 형식으로 저장)에 올라간다. 디비가 커진다.

대신에 업로드 폴더 관리나 업로드 관련 코드가 필요없다.

아래와 같이 디비에 저장된다.

저작자표시

'프로그래밍 > JAVA & SPRING' 카테고리의 다른 글

[LifeSoft] spring 21강 게시판 만들기2( 페이지 나누기, 검색 기능 ) (0)	2020.06.07
[LifeSoft] spring 20강 게시판 만들기1(목록, 글쓰기) (0)	2020.06.07
[LifeSoft] spring 18강 이메일 보내기 (0)	2020.06.07
[LifeSoft] spring 15강 인터셉터(Interceptor) (0)	2020.06.07
[LifeSoft] spring 14강 AOP와 트랜잭션 처리 실습 (0)	2020.06.07

생활코딩

[LifeSoft] spring 19강 Smart Editor(CKEditor, SummerNote)

'프로그래밍 > JAVA & SPRING' 카테고리의 다른 글

티스토리툴바

[LifeSoft] spring 19강 Smart Editor(CKEditor, SummerNote)

'프로그래밍 > JAVA & SPRING' 카테고리의 다른 글

'프로그래밍/JAVA & SPRING' Related Articles

티스토리툴바