Javascript: CKEditor 5 Base64로 이미지 업로드

ckeditorUploadAdapter.js 파일 추가

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

	upload() {
		return new Promise((resolve, reject) => {
			const reader = this.reader = new FileReader();

			reader.onload = function () {
				resolve({ default: reader.result });
			};

			reader.onerror = function (error) {
				reject(error);
			};

			reader.onabort = function () {
				reject();
			};

			this.loader.file.then(file => {
				var size = 1024 * 1024;
				if (file.size > size) {
					reject('Image files can only be up to 1MB.');
					return;
				}

				reader.readAsDataURL(file);
			});
		});
	}

	abort() {
		if (this.reader) {
			this.reader.abort();
		}
	}
}

 

ckeditor를 생성하는 부분에 function 추가와 extraPlugins 설정

function Base64UploaderPlugin(editor) {
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
        return new UploadAdapter(loader, editor.t);
    };
}

function CreateEditor(editorId, defaultValue, height, dotNetReference) {
    ClassicEditor
        .create(document.getElementById(editorId), {
            extraPlugins: [Base64UploaderPlugin],
            ...
            ...
            생략
            ...
            ...
        });
}