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 upload images with Drag&Drop. But when I will try it with the download ballon zip nothing happens when I try to Drag&Drop a image. There is also no error.
Is there a way to use this image support in the downladable variant?
Paste or drop an image directly into the editor. You can also use the "Insert image" button in the toolbar. Paste the media URL in the input. CKEditor 5 offers multiple ways to include images in your rich content.
To upload a new image open the upload panel in the image browser. Open the Image info tab and click Browse server. A new window will open where you see all your uploaded images. Open the Settings to choose another upload path.
Client-side configurationUse the image. upload. types configuration option to define the allowed image MIME types that can be uploaded to CKEditor 5. By default, users are allowed to upload jpeg , png , gif , bmp , webp and tiff files, but you can customize this behavior to accept, for example, SVG files.
Yes, image upload is included in all the available builds. In order to make it work, though, you need to configure one of the existing upload adapters or write your own. In short, upload adapter is a simple class which role is to send a file to a server (in whatever way it wants) and resolve the returned promise once it's done.
You can read more in the official Image upload guide or see the short summary of the available options below.
There are two built-in adapters:
For CKFinder which require you to install the CKFinder connectors on your server.
Once you have the connector installed on your server, you can configure CKEditor to upload files to that connector by setting the config.ckfinder.uploadUrl
option:
ClassicEditor .create( editorElement, { ckfinder: { uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json' } } ) .then( ... ) .catch( ... );
You can also enable full integration with CKFinder's client-side file manager. Check out the CKFinder integration demos and read more in the CKFinder integration guide.
For the Easy Image service which is a part of CKEditor Cloud Services.
You need to set up a Cloud Services account and once you created a token endpoint configure the editor to use it:
ClassicEditor .create( editorElement, { cloudServices: { tokenUrl: 'https://example.com/cs-token-endpoint', uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/' } } ) .then( ... ) .catch( ... );
Disclaimer: These are proprietary services.
You can also write your own upload adapter which will send files in the way you want to your server (or wherever you like to send them).
See Custom image upload adapter guide to learn how to implement it.
An example (i.e. with no security built-in) upload adapter can look like this:
class MyUploadAdapter { constructor( loader ) { // CKEditor 5's FileLoader instance. this.loader = loader; // URL where to send files. this.url = 'https://example.com/image/upload/path'; } // Starts the upload process. upload() { return new Promise( ( resolve, reject ) => { this._initRequest(); this._initListeners( resolve, reject ); this._sendRequest(); } ); } // Aborts the upload process. abort() { if ( this.xhr ) { this.xhr.abort(); } } // Example implementation using XMLHttpRequest. _initRequest() { const xhr = this.xhr = new XMLHttpRequest(); xhr.open( 'POST', this.url, true ); xhr.responseType = 'json'; } // Initializes XMLHttpRequest listeners. _initListeners( resolve, reject ) { 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 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.url } ); } ); 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() { const data = new FormData(); data.append( 'upload', this.loader.file ); this.xhr.send( data ); } }
Which can then be enabled like this:
function MyCustomUploadAdapterPlugin( editor ) { editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => { return new MyUploadAdapter( loader ); }; } ClassicEditor .create( document.querySelector( '#editor' ), { extraPlugins: [ MyCustomUploadAdapterPlugin ], // ... } ) .catch( error => { console.log( error ); } );
NOTE: The above is just an example upload adapter. As such, it does not have security mechanisms built-in (such as CSRF protection).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With