=== Classic editor 적용 예시 ===
* editor는 div 또는 textarea 사용
CKEditor 5 – Classic editor
Classic editor
//
This is some sample content.
=== Document editor 적용 예시 ===
* toolbar 부분과 editor 부분이 나뉨
* editor와 toolbar 부분은 div 사용
CKEditor 5 – Document editor
Document editor
This is the initial editor content.
===== Tip =====
* get,setData()
* CKEditor5는 getData()와 setData()로 값을 가져오거나 값을 삽입할 수 있다.
* 여기서 주의 사항은 아래를 참고
* <예시>
===== 이미지 업로드 =====
* CKEditor5는 이미지 업로드 다양한 플러그인이 존재하지만 대부분 유료 플러그인이다.
* 그래서 Adapter부분을 새로 만들어야 한다.
=== UploadAdapter 예시 ===
* [[https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/upload-adapter.html|Custom image upload adapter 공식 문서]]
* 아래 사이트를 참고
* [[https://jjong-factory.tistory.com/55|CKEditor5 이미지 업로드]]
* [[https://simsimjae.tistory.com/340|CKEditor5 이미지 업로드 기능 정리]]
* 주의사항
* 이미지 및 file의 데이터는 FormData 변경 후 controller에 보내야 함.
=== Controller 예시 ===
* url로 addObject 하는 이유
* 이미지가 업로드가 되고 저장 경로가 base64로 인코딩되어 img 태그 안의 src부분에 들어간다.
* editor를 활용하여 등록할 경우 데이터베이스에 p 태그와 img 태그가 함께 저장이 되어 불러올 때 로딩시간이 길어진다.
@PostMapping(value = "url부분")
public ModelAndView imageUpload (MultipartHttpServletRequest request) throws Exception {
String currContextPath = request.getContextPath();
ModelAndView mv = new ModelAndView("jsonView");
String savePath= null; //저장경로
String originalImagename= null; //원본이름
String imageName= null; //저장본이름
String extension= null; //확장자
String realPathtoUploads = EgovProperties.getProperty("globals.properties에 생성하여 삽입");
List imageList = request.getFiles("upload"); // UploadAdapter에서 _sendRequest() 사용했을 때
for (MultipartFile mf : imageList) {
if (imageList.get(0).getSize() > 0) {
originalImagename = mf.getOriginalFilename(); // 원본 파일 명
extension = FilenameUtils.getExtension(originalImagename); // 확장자
imageName = "img_" + UUID.randomUUID() + "." + extension; // 이미지가 업로드 되면서 저장되는 이름
savePath = realPathtoUploads +"/"+imageName; => 이미지 업로드 경로
File imageUpload = new File(savePath);
try {
mf.transferTo(imageUpload); => 실질적으로 이미지 업로드하는 부분
} catch (IllegalStateException | IOException e) {
e.printStackTrace();
}
}
}
savePath = "이미지의 src 부분에 들어갈 저장 경로를 적어준다.";
log.debug("savePath=[{}]", savePath);
mv.addObject("url", savePath);
return mv;
}
* 이미지 업로드 시 톰켓 서버에 바로 반영하기 위한 설정
* 아래와 같이 체크 표시를 해준다.
* 이 설정을 하지 않으면 업로드된 이미지를 톰켓 서버에서 못가지고 온다.
{{wiki:editor:ckeditor5:ckeditor_tomcat_server.png?900}}
=== 이미지 업로드 후 처리 ===
* Jenkins로 배포한 경우
* globals.propertie 안에 저장경로를 다시 설정 해준다.
* <예시>
* APPS Portal의 경우
* CMD로 해당 서버로 들어가서
* '/WAS_APPS/tomcat-instance/apps.repia.com/deploy/' 안에 'globals.properties' 부분에 이미지가 저장되는 경로를 설정
* 저장 경로는 '/WAS_APPS/tomcat-instance/apps.repia.com/webapps/ROOT/resource/(저장 경로)'로 설정함
===== Ref =====
* [[https://ckeditor.com/docs/ckeditor5/latest/index.html|CKEditor5 공식 문서]]
* [[https://www.codingfactory.net/13253|CKEditor5 설정 방법]]
{{tag>slaptear ckeditor5}}