Pasting images into RichTextEditor

[senordhuff]

Hello, I am trying to figure out how to paste images into the RichTextEditor. It looks like you can copy images from a web browser and paste them into the Rich Text Editor but you can't copy a local image. Is there any way to allow users to paste local images as well?

[Isomorphic]

What are you hoping to have happen in terms of how the images are stored? By URL? As "data:" URLs?

Some kind of post-processing will likely be required either way, and may differ by browser.

[senordhuff]

I just want the same behavior that currently works when copying an image from a web browser to work for copying a local image if possible. When copying from a web browser, it saves it as a base64 data URI in an image tag like this abbreviated example: <img src="data:image/jpeg;base64,/9j/4AAQSkZJRg.....

[Isomorphic]

What browser and version, on what OS and version, and with what UI gesture (drag and drop, copy and paste via keyboard or via menu, etc) is this happening?

Please try and include this information in the future.

[senordhuff]

Using latest version of Chrome on Windows 10.

1. Go to www.google.com
2. Right-click on Google image and "Copy Image"
3. Open Rich Text Editor here: http://www.smartclient.com/smartgwt/...trols_richedit
4. Click into Rich Text Editor and ctrl V or right-click to Paste image.
5. Image is pasted into rich text editor
6. Go back to www.google.com and right-click and "Save Image as" and save image to local machine
7. Navigate to locally saved image and right-click > Copy image
8. Go back to Rich Text Editor and ctrl V or right-click to attempt to paste and you cannot paste the local image.

Hopefully that gives enough info. We have a customer who wants to paste local images into the Rich Text Editor so trying to figure out how to do it.

[Isomorphic]

We see that you specified Chrome / Win10, but there are lots of reasons why we might not get the same result. So can you clarify:

1. What do you mean by "you cannot paste the local image"?
2. Assuming it's not a total failure, what do you see in the HTML returned by the RTE at this point?

Also note: JavaScript code is rather unlikely to be able to influence the native behavior here. If you are looking for a workaround in terms of some other UI gesture that works for local images, have you tried:

1. Dragging the image to a new Chrome tab and copy/pasting from there? This might trick the browser into using the same mechanism is used for the image on Google's page

2. Using drag and drop from the desktop instead of copy/paste?

[senordhuff]

Hi, thanks for the reply.

1. I mean the steps I specified in steps steps 6-8 in my detailed example.
2. I see an <img> tag that looks like the snippet I pasted earlier like this: <img src="data:image/jpeg;base64,/9j/4AAQSkZJRg..... . I can't paste the whole thing because it is causing an issue to paste the whole thing into the forums.

Yes, I have tried dragging the image into a new chrome tab or just opening the local image in chrome and it doesn't work. Dragging and dropping from the desktop doesn't work either. So, we are looking for some way to do this with local images still.

[Isomorphic]

We're still not following what you mean by "you cannot paste a local image". There are many possibilities: nothing happens, something happens but it's not right, etc.

You seem to be saying that what happens is that you get a data: URL in the HTML. But you must have mistook the question or something, because of course, that's what defines the success case as far as we can see.

[senordhuff]

What I mean is that in step 5 of my instructions you see an image get pasted into the rich text editor. Have you successfully seen that? But, in step 8, basically nothing happens. I believe my detailed instructions are easy to follow and if you follow them you will see what I mean. If there is something more I need to do to clarify, please let me know.

[Isomorphic]

Great - "nothing happens" is the specific description of what's going wrong that we were asking for.

[Isomorphic]

We've verified this behavior and determined that it's a native issue in the browser (as opposed to some kind of mistake in our markup or event handlers causing an issue).

We've looked at the same steps in a few different browsers and OSes, and the behavior varies quite a bit: some do nothing, some work as expected, some paste just a filesystem path.

We can't reasonably take this a bug report and start trying to hack all the different browser/OS combos to see whether we can work around the issue in all browsers; we don't in general claim to make the RTE experience perfectly uniform across browsers (that's a product category in its own right).

There's a few approaches we would recommend:
1. you could allow users to upload images as a first step, then drag copy them to your RTE
2. you could keep looking for some other UI gesture that works for local files and recommend that to your users (but note, we weren't able to find one)
3. you could pursue this low-level DOM approach, which would involve getting into some unsupported internals, but might work well enough at least for Chrome.
4. for completeness: you could use Feature Sponsorship to have us implement 3 or maybe even 1 above, or to provide additional APIs that might make it easier to implement either of those approaches

[senordhuff]

Thank you for the thorough reply. Is there a 5th option where we integrate a third party RTE such as CKEditor as described here? https://isomorphic.atlassian.net/wik...or+as+a+widget

[Isomorphic]

Maybe - you'd have to test whether the particular RTE you chose attempts a workaround for this browser issue.