Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pasted images should trigger upload if Image Upload plugin is enabled #2524

Closed
f1ames opened this issue Oct 26, 2018 · 1 comment · Fixed by ckeditor/ckeditor5-image#248
Closed
Assignees
Labels
package:paste-from-office type:feature This issue reports a feature request (an idea for a new functionality or a missing option).
Milestone

Comments

@f1ames
Copy link
Contributor

f1ames commented Oct 26, 2018

Follow up of #2515.

When content containing images is pasted from Word (or any other supported Office suite) the image upload should be triggered so pasted images could be automatically uploaded to a server.

@f1ames
Copy link
Contributor Author

f1ames commented Nov 6, 2018

This is a quite broad topic discussed already in https://github.com/ckeditor/ckeditor5-image/issues/211 and https://github.com/ckeditor/ckeditor5-easy-image/issues/14. There are few general cases to cover, however in the context of Paste from Office there are two basic flows when pasting images.

In Chrome, Firefox and Edge when content is pasted from Word, images are represented with local sources (file://). In the browser clipboard apart from text/html data, there is text/rtf data provided which contains entire images encoded as hex strings. These strings are extracted, converted to base64 and used as new image elements sources e.g <img src="data:image/jpeg;base64,..." >.

This is a synchronous process so all content manipulation takes place on a view instance so data inserted on paste is in its final form (no transformations are applied after data is rendered in the editor).

So for that case base64 images could be detected on clipboard event (inputTransformation) or on model change event.

In Safari when content is pasted from Word, images are represented with local blob resource (blob://). Such resources are then fetched (via XHR), converted to base64 representation and then used as new image elements sources e.g <img src="data:image/jpeg;base64,..." >.

As fetching blobs is an asynchronous process, first the data with blobs is inserted into the editor (images are already visible) and then when each blob is fetched and converted, images sources are replaced.

In that case detecting base64 images should be done on model change event.

There could be the other way around, to handle blobs in uploadimage plugins (similar to what is done in PFO plugin - fetch blob data, upload, and replace with uploaded image), however as blobs are only present when pasting content from Word in Safari (no other known case) it doesn't make any sense to duplicate this logic.


To sum up the best approach for handling images pasted from Word seems to be listening to model changes and if there are any base64 encoded images, run the upload. This will cover all browsers mentioned above without splitting the logic to two different flows.

@f1ames f1ames self-assigned this Nov 8, 2018
Reinmar referenced this issue in ckeditor/ckeditor5-image Nov 27, 2018
Feature: Support for uploading images with base64 source. Closes #246. Closes ckeditor/ckeditor5-paste-from-office#24.
@mlewand mlewand transferred this issue from ckeditor/ckeditor5-paste-from-office Oct 9, 2019
@mlewand mlewand added this to the iteration 21 milestone Oct 9, 2019
@mlewand mlewand added status:confirmed type:feature This issue reports a feature request (an idea for a new functionality or a missing option). package:paste-from-office labels Oct 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package:paste-from-office type:feature This issue reports a feature request (an idea for a new functionality or a missing option).
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants