How to enable image upload support in CKEditor 5?

前端 未结 4 2102
既然无缘
既然无缘 2020-11-27 04:15

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

4条回答
  •  野性不改
    2020-11-27 04:59

    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';
    
    
    
      

提交回复
热议问题