CKEditor5 - Web Editor CKEditor5 이미지 업로드

 

시작에 앞서

일단 CKEditor 를 사용하기로 마음을 먹었는데, 에디터를 커스텀 할 때 가장 첫 번째로 문제가 되는 점은 역시 이미지를 업로드 하는 문제일 것이다.

 

CKEditor는 해당 부분을 굉장히 말끔하게 해결해 주었는데, CKEditor5는 국내 문서가 별로 없는것 같아서 따로 정리해 본다.

만약, 라이센스문제를 찾아보고 계신다면 아래 문서를 확인해 주시면 될 것 같습니다.

 

CKEditor 소개 및 라이센스에 관한 문서 보러가기

CKEditor5 - Web Editor CKEditor5 소개 및 라이센스 문제

 

 

CKEditor Image Upload의 장점

CKEditor의 Image Upload 기능을 사용하면서 느꼈던 장점은 3가지가 있다.

• 커스텀 이미지 업로드 구현이 간편하다.
• 기본적으로, 드로그 앤 드롭 (Drog & Drop) 형태의 이미지 업로드 방식을 제공한다.
• 또 기본적으로, 클립보드에 있는 이미지를 붙여넣기 하여도 업로드가 된다.

위 3가지 기능만 보더라도 개발자이건, 사용자이건 무척 매력적이게 다가 온다.

이미지 업로드 구현 자체도 간단한데, Drop & Drop 형태와 클립보드의 이미지도 가능하다니. 게다가 무료이다.

사용자는 문서를 편집하는데 있어서 간편해서 좋고, 개발자는 빠른 시간에 품질 좋은 에디터를 붙힐 수 있어서 좋다.

안 쓸 이유가 없는 것 같다..

(그렇다고 아무런 작업도 하지 않았는데 이미지가 뚝딱 올라가는건 아닙니다 !)

 

 

CKEditor Image Upload Adpater

일단 필자는 공식 문서가 굉장히 잘 되어 있어서 공식 문서를 보면서 개발을 진행 하였다.

공식 문서는 아래 링크를 참조해 주세요.

Custom upload adapter - CKEditor 5 Documentation

CKEditor 에 Image Upload를 구현하기 위해서는 먼저 UploadAdpater 를 작성 하여야 한다.

따로, UploadAdapter.js 파일을 구현해 줬다.

class UploadAdapter {
    constructor(loader) {
        this.loader = loader;
    }

    upload() {
        return this.loader.file.then( file => new Promise(((resolve, reject) => {
            this._initRequest();
            this._initListeners( resolve, reject, file );
            this._sendRequest( file );
        })))
    }

    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://localhost:8000/api/image/upload', true);
        xhr.responseType = 'json';
    }

    _initListeners(resolve, reject, file) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = '파일을 업로드 할 수 없습니다.'

        xhr.addEventListener('error', () => {reject(genericErrorText)})
        xhr.addEventListener('abort', () => reject())
        xhr.addEventListener('load', () => {
            const response = xhr.response
            if(!response || response.error) {
                return reject( response && response.error ? response.error.message : genericErrorText );
            }

            resolve({
                default: response.url //업로드된 파일 주소
            })
        })
    }

    _sendRequest(file) {
        const data = new FormData()
        data.append('upload',file)
        this.xhr.send(data)
    }
}

코드를 간단하게 설명하면, upload() 함수가 실행 되었을 때 서버에 파일을 업로드 요청을 보내고 해당 값을 되돌려 받는다.

일단 급하게 이미지 업로드 어댑터를 구현하셔야 하는 분들은,

    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://localhost:8000/api/image/upload', true);
        xhr.responseType = 'json';
    }

위 서버 요청 주소만 바꿔 주시면 될 것 같다.

 

파일 업로드가 서버에 구축이 안되어 있으면 먼저 파일 업로드를 서버측에 구축을 해 주어야 한다.

만약, 서버측에서 파일 업로드가 구현이 되어 있지 않고 PHP Laravel을 사용한다면,

[Laravel] AWS S3 연동하기 및 파일 업로드 구현

위 링크를 같이 확인해 주시면 될 것 같습니다.

 

 

어댑터 연결

어댑터 연결은 굉장히 간단하다.

먼저 아래와 같은 함수를 작성해 준다.

function MyCustomUploadAdapterPlugin(editor) {
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
        return new UploadAdapter(loader)
    }
}

그 후, 에디터를 선언하는 부분에서

extraPlugins: [MyCustomUploadAdapterPlugin]
값만 추가해 주면 된다.

ClassicEditor.create(document.getElementById(divId), {
  extraPlugins: [MyCustomUploadAdapterPlugin],
  ...
}

정말 간단하게 끝이 났다.

실제로 업로드도 잘 되는 것을 확인.

짝짝짝!

 

※ 2022.04.15

참고로, 일반적인 javascript나 jquery만을 사용하여 해당 파트를 진행하시는 분들은 본 포스트를 읽어 주시고 아래 포스트를 꼭 읽어 주세요 !

CKEditor5 - Web Editor CKEditor5 이미지 업로드(For jQuery)