Nuxt Ckeditor5 이미지 업로드

1.업로드 클래스 구축

// import {  newTokenMessage} from "@/assets/js/Jslib";
export default class MyUploadAdapter {
    constructor(props) {
        // CKEditor 5's FileLoader instance.
        this.loader = props;
        // URL where to send files.
        this.url = process.env.API_URL+'/file/upload';
    }

    // Starts the upload process.
    upload() {
        console.log('upload');
        return new Promise((resolve, reject) => {
            this._initRequest();
            this._initListeners(resolve, reject);
            this._sendRequest();
        });
    }

    // Aborts the upload process.
    abort() {
        console.log('about');
        if (this.xhr) {
            this.xhr.abort();
        }
    }

    // Example implementation using XMLHttpRequest.
    _initRequest() {
        console.log('_initRequest');
        const xhr = this.xhr = new XMLHttpRequest();
        xhr.open('POST', this.url, true);
        // xhr.setRequestHeader('authentication',this.data.authentication);
        // xhr.setRequestHeader('refreshToken',this.data.refresh);
        xhr.withCredentials = true;
        xhr.responseType = 'json';

    }

    // Initializes XMLHttpRequest listeners.
    _initListeners(resolve, reject) {
        console.log('_initListeners');

        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = 'Couldn\'t upload file:' + ` ${loader.file.name}.`;

        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);
            }
            /**
             * 토큰 만료시 재요청
             */
            if (response.message == newTokenMessage()) {
                /**
                 * jwt 쿠키로변경
                 */
                this._initRequest();
                this._initListeners(resolve, reject);
                this._sendRequest();
                return;
            }
            // If the upload is successful, resolve the upload promise with an object containing
            // at least the "default" URL, pointing to the image on the server.
            resolve({
                default: response.message[0]
            });
        });

        if (xhr.upload) {
            xhr.upload.addEventListener('progress', evt => {
                if (evt.lengthComputable) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            });
        }
    }

    // Prepares the data and sends the request.
    _sendRequest() {
        console.log('_sendRequest');

        const data = new FormData();

        this.loader.file.then(result => {
            data.append('upload', result);
            this.xhr.send(data);
        }
        )
    }

}

2.업로더 메소드 생성

MyCustomUploadAdapterPlugin() {
            this.editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
                return new MyUploadAdapter(loader);
            };
        }

 3.에디터에 적용

window.ClassicEditor
                .create(this.$refs.editor, {
                    extraPlugins: [],
                    // toolbar: [],
                })
                .then(newEditor => {
                    this.editor = markRaw(newEditor);
                    this.MyCustomUploadAdapterPlugin();

                })
                .catch(error => {
                    console.log(error);
                    alert('에디터생성에 실패했습니다');
                })

기존 extraPlugins 대신 에디터 생성직후 적용