CKEditor 5 심플 이미지 업로드, 정렬 플러그인 추가

일단 해당 플러그인들은 CKEditor 5에서 제공하는 CDN으로 빌드하면 추가가 되어 있지 않은데요.

플러그인을 추가로 설치해서 nodejs를 이용해서 빌드하셔야 합니다.

플러그인 설치방법은 공식문서에 자세하게 나와 있습니다.

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html

Installing plugins - CKEditor 5 Documentation

소스를 받으시고, packages\ckeditor5-build-classic 폴더로 들어가서

npm install 후에

src\ckeditor.js 파일을 공식문서처럼 수정해주시면 되는데

SimpleUploadAdapter, ImageResize, Alignment를 추가해주세요.

그리고 npm run build 하시면

build 폴더에 빌드되어 있습니다. 

 

플러그인 설치과정이 복잡하시면 제가 빌드해놓은 파일을 쓰셔도 됩니다.

build.7z

0.97MB

 

1. editor 초기화 및 설정

<div id="editor">
</div>
<script>
    ClassicEditor
        .create(document.querySelector("#editor"),
            {
                language: "ko",
                simpleUpload:
                {
                    uploadUrl: "/upload/image",
                    withCredentials: true,
                }
            })
        .then(newEditor => {
            editor = newEditor;
        })
        .catch(error => {
            console.error(error);
        });
</script>

 

2. Java 기준 컨트롤러

@ResponseBody
@PostMapping("/upload/image")
public Map<String, Object> uploadImage(@RequestParam Map<String, Object> paramMap, MultipartRequest request) throws Exception
{
	MultipartFile uploadFile = request.getFile("upload");
	String uploadDir = servletContext.getRealPath("/").replace("\\", "/") + "/static/upload/images/";
	String uploadId = UUID.randomUUID().toString() + "." + FilenameUtils.getExtension(uploadFile.getOriginalFilename());
	uploadFile.transferTo(new File(uploadDir + uploadId));
	paramMap.put("url", "/static/upload/images/" + uploadId);
	return paramMap;
}

예제라서 소스경로 안에다가(webapp) 저장했지만 실사용에서는 소스 외부경로에 저장폴더를 설정하시고 Tomcat에 외부경로 연결하셔서 사용하시는게 좋습니다.