이번에 블로그를 새로 만들면서 에디터로 ckeditor5를 사용하였습니다. 원래 유명한 에디터이고 예전 버전이지만 사용해본적도 있어 선택을 하였는데 5 버전의 경우 과거와는 좀 다른 면들이 있었습니다. 간단히 말씀드리면 제 블로그와 같이 소규모 개인 프로젝트가 아닌 일반적인 웹서비스 용도로는 유료 구매가 필수적이라는 것입니다. 어쨌든 이 포스팅의 주제인 ckeditor5에서 이미지 업로드에 관해 정리해보겠습니다.

ckeditor5에서 공식적으로 지원하는 이미지 업로드 방식은 4가지가 있습니다. Easy Image,CKFinder,Simple adapter,Base64 adapter. 이중 Easy Image가 가장 기능이 많고 이것을 권하는데 당연히(?) 유료 옵션입니다. 예전 버전부터 있던 CKFinder의 경우도 무료 버전에서는 데모 버전으로 동작하기에 제외. Base64 adapter의 경우 무료 버전에서도 잘 작동하나 용량이 큰 이미지를 사용하기에는 무리이기에 역시 제외. 결국 남은 것은 Simpler adapter뿐 입니다.

Simple adapter는 ckeditor5 공식 빌드에서는 지원하지 않기에 ckeditor5 online builder를 사용해 별도의 커스텀 빌드를 만들어야 합니다. 기본으로 들어 있는 CKFinder를 제외하고 Simple adapter를 추가해주시면 됩니다.

커스텀 빌드한 ckeditor5 js 파일을 에디터 페이지에서 지정해준 후 아래와 같이 설정해 줍니다.

ClassicEditor.create(document.querySelector("#editor"), {
    simpleUpload: {
        uploadUrl: '업로드 처리 페이지 경로',
    },
... 

업로드 처리 페이지 경로는 이미지 파일의 업로드를 처리하는 페이지의 주소입니다. 'https://www.aaa.com/test/upload.php'가 해당 페이지 경로라면 '/test/upload.php'를 적어주시면 됩니다.

업로드를 처리하는 서버쪽은 업로드되는 폼 이름을 'upload'으로 해서 기본적인 업로드와 같은 형태로 처리해주시면 됩니다. 업로드 후 결과는 json 형식으로 리턴 해주시면 되는데 성공했을 경우는,

{
    "url": "업로드된 이미지 경로"
}

실패했을 경우는,

{
    "error": {
        "message": "업로드 실패."
    }
}

ckeditor5는 확실히 잘 만든 에디터입니다. 세련되었고 완성도도 높습니다. 다만, 앞에서 이야기한 것처럼 소규모 웹사이트가 아닌 경우는 무료로 사용하기에 어려움이 있기에 다음에 비슷한 작업을 하게 된다면 NHN의 TOAST UI Editor를 사용해볼 것 같습니다.