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

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], ... ... 생략 ... ... }); }

반응형

from http://vip00112.tistory.com/75 by ccl(A) rewrite - 2021-12-09 01:29:53