CKEditor 4.5 drag and drop images - how to return new dimensions to json response?

Question

I have drag and drop images using CKEditor 4.5.1. Very nice feature! On the server side, I am resizing large images. My JSON response returns the changed URL of the image (given the "url" in the response), and this is the image that appears in the CKEditor window after the file is successfully downloaded. But the img insert tag has height and width attributes specified with the values ​​of the original image, and not a modified image. Is there any way to return new height and width values? Or does anyone have an idea how to hack this?

And in general, is there any resource that describes all the possible values ​​in the JSON response? I saw that he mentioned somewhere that he has not yet been documented, but I hope someone can know and spend time sharing.

Answer 1

When the image download finishes, CKEditor replaces the boot widget (which contains the image with Base64 data in the source) with the final HTML. The downloaded image is the same size as the loaded image to prevent blinking during this replacement. Here are the lines that make this replacement.

If blinking while loading an image is not a problem for you, you can simply overwrite this method:

editor.on( 'instanceReady', function() { editor.widgets.registered.uploadimage.onUploaded = function ( upload ) { this.replaceWith( '<img src="' + upload.url + '">' ); } } ); 

Now, where can we get image sizes from?

One option is to upload an image ( upload.url ) and read its size in a browser. However, this is an asynchronous operation, so it can affect the cancellation manager, and I would not recommend it.

Therefore, if you know new measurements that you can send then in the server response. If you put them in your JSON response as follows:

 { "uploaded": 1, "fileName": "foo.jpg", "url": "/files/foo.jpg", "width:" 300, "height:" 200 } 

You need to process them in the answer (we will most likely simplify this bit in the near future):

 editor.on( 'fileUploadResponse', function( evt ) { var fileLoader = evt.data.fileLoader, xhr = fileLoader.xhr, data = evt.data; try { var response = JSON.parse( xhr.responseText ); // Error message does not need to mean that upload finished unsuccessfully. // It could mean that ex. file name was changes during upload due to naming collision. if ( response.error && response.error.message ) { data.message = response.error.message; } // But !uploaded means error. if ( !response.uploaded ) { evt.cancel(); } else { data.fileName = response.fileName; data.url = response.url; data.width = response.width; data.height = response.height; // Do not call the default listener. evt.stop(); } } catch ( err ) { // Response parsing error. data.message = fileLoader.lang.filetools.responseError; window.console && window.console.log( xhr.responseText ); evt.cancel(); } } ); 

To learn more, editor#fileUploadResponse , and Download files with drop-down or file attachments .

Then you can use them in download widgets:

 editor.on( 'instanceReady', function() { editor.widgets.registered.uploadimage.onUploaded = function( upload ) { this.replaceWith( '<img src="' + upload.url + '" ' + 'width="' + upload.width + '" ' + 'height="' + upload.height + '">' ); } } ); 

PS. We considered the possibility of including such a function in the kernel, but since the release was huge, we had to at some point limit it so that it finally came to life. There is a high probability that such a function will be included in the main core in the near future, and only configuration is required.

Answer 2

@Michael, thanks for the reply. I have also tested and can say that fileUploadResponse is not required.

Responce data can be accessed from a Ready instance like this (if present in the response from the source server)

 __ckeditor.on( 'instanceReady', function() { __ckeditor.widgets.registered.uploadimage.onUploaded = function( upload ) { console.log(upload); this.replaceWith( '<img src="' + upload.url + '" ' + 'width="' + upload.responseData.width + '" ' + 'height="' + upload.responseData.height + '">' ); } } );