I will use the ckeditor v5 into my project. I´ve trying to use the image plugin, but I don´t find enough informations about it.
If you see the Demoe here, you easily
In React
Make a new file with MyCustomUploadAdapterPlugin
import Fetch from './Fetch'; //my common fetch function
class MyUploadAdapter {
constructor( loader ) {
// The file loader instance to use during the upload.
this.loader = loader;
}
// Starts the upload process.
upload() {
return this.loader.file
.then( file => new Promise( ( resolve, reject ) => {
const toBase64 = file => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
return toBase64(file).then(cFile=>{
return Fetch("admin/uploadimage", {
imageBinary: cFile
}).then((d) => {
if (d.status) {
this.loader.uploaded = true;
resolve( {
default: d.response.url
} );
} else {
reject(`Couldn't upload file: ${ file.name }.`)
}
});
})
} ) );
}
}
// ...
export default function MyCustomUploadAdapterPlugin( editor ) {
editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
// Configure the URL to the upload script in your back-end here!
return new MyUploadAdapter( loader );
};
}
and in
import MyCustomUploadAdapterPlugin from '../common/ckImageUploader';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';