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

시작에 앞서

기존, CKEditor5를 사용하여 이미지 업로드 게시글을 올린 적이 있다. 피드백이 너무 늦었지만, 댓글로 문의 주시는 대부분이 그냥 javascript나 jquery를 사용하여 개발중이신 분들이 많은 것 같았다.

CKEditor5 - Web Editor CKEditor5 이미지 업로드

해당 분들을 위해서 조금 내용을 수정하여, jquery를 사용하시는 분들도 이미지 업로드 모듈을 쉽게 구현하도록 예제를 들어서 설명을 진행해 보려고 한다!

 

먼저 기존 글을 읽어보신 뒤에 해당 포스트를 읽는 것을 추천합니다~!

 

 

가장 큰 차이점은 업로드 어댑터에서의 export!

기본적인 javascript나 jquery만을 사용하여 개발을 진행하시는 분들은

아니 그래서 모듈 임포트가 어떻게 되는건데? 나는 안되는데..?

일 확률이 굉장히 높다..

일단, 업로드 어댑터 구현은 다음과 같이 진행해보자.

export default 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)
    }
}

기존과 달라진 점이 있다면, class 앞에 export default가 추가적으로 붙은 것이다.

 

 

그 후, 다음과 같은 js 코드를 하나 만들어 준다.

import UploadAdapter from '/js/ckeditor5/adapter/UploadAdapter.js'

export default function makeEditor(target) {
    return ClassicEditor.create(document.querySelector(target), {
        extraPlugins: [MyCustomUploadAdapterPlugin]
    })

}

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

이러면 일단 준비는 끝!!

 

 

에디터 적용

    <script src="js/ckeditor5/build/ckeditor.js"></script>
    <script src="js/editor.js" type="module"></script>​

먼저, 위와같이 ckeditor.js를 호출해 주고 그 밑에 아까 작성한 위에서 작성한 js 파일을 호출한다.

editor.js 라는 파일으로 저장하였고, type="module"을 반드시 추가해 주도록 한다 !

 

그다음

<textarea id="input-content"></textarea>

위와같은 input-content textarea에 에디터를 적용한다고 한다면..

아래와 같은 스크립트를 추가해 준다.

 

<script type="module">
    import editor from '/js/editor.js'
    $(document).ready(function () {
        editor("#input-content").then(editor => {
        	// some code..
            // then 이후에 받은 editor를 다른 변수로 받아주시는 편이 좋습니다!
        })
    })
</script>

반드시, type="module"을 추가해줘서 작성해주시면 됩니다.

 

이러면 정상적으로 이미지 업로드가 구현된 에디터가 호출됩니다. (짝짝짝)

 

반드시 이전에 작성된 포스트를 먼저 읽어주시고, 해당 포스트를 읽어주세요 !!