목차

Ckeditor5

  • description : Ckediotr5 관련 내용 기술
  • author : slaptear
  • email : sgjang@repia.com
  • lastupdate : 2023-03-02

적용 방법

<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/decoupled-document/ckeditor.js"></script>

Classic editor 적용 예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
</head>
<body>
    <h1>Classic editor</h1>
    <div id="editor">  // 
        <p>This is some sample content.</p>
    </div>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

Document editor 적용 예시

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Document editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/decoupled-document/ckeditor.js"></script>
</head>
<body>
    <h1>Document editor</h1>
    
    <!-- editor의 toolbar container-->
    <div id="toolbar-container"></div>

    <!-- editor 부분-->
    <div id="editor">
        <p>This is the initial editor content.</p>
    </div>

    <script>
        DecoupledEditor
            .create( document.querySelector( '#editor' ) )
            .then( editor => {
                const toolbarContainer = document.querySelector( '#toolbar-container' );

                toolbarContainer.appendChild( editor.ui.view.toolbar.element );
            } )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

Tip

 <script>
   let testEditor;                      => 사용할 editor의 변수를 선언
   
   // 생성
   ClassicEditor
         .create(document.querySelector( '#editor' ))
         .then( editor => {
               testEditor= editor;     => 해당 editor를 변수에 적용
          })
         .catch( error => {
           console.error( error );
          });
  
  // 값 가져오기
  testEditor.getData();                 => 변수에 적용 후 사용해야한다.
  
  // 값 세팅
  testEditor.setData('<p>example</p>'); => 변수에 적용 후 사용해야한다.
 </script>

이미지 업로드

UploadAdapter 예시

Controller 예시

@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<MultipartFile> 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;
}

이미지 업로드 후 처리

Ref

,