Paste an image from clipboard using java script

Question

Hi all,

How do we paste an image from clipboard into a custom rich text editor using javascript? (ctrl+c and ctrl+v or a snapshot).

Has anyone used Ajax's rich text editor? Does pasting an image from clipboard to Ajax RTE work?

Please do share your thoughts!

Thanks!

Answer 1

I don't think this is possible.

You can possibly paste the file name, but you really need the full path to the image. You actually need to upload the image from the user's system to the server.

Answer 2

For now i found the clipboardData Object .

But it retrieve only text format or URL from clipboard. clipboardData is IE only, it works with character string and return null is we paste an image.

a test example

 <form>
    <input type="text" id="context"  onClick="paste();">  
  </form>

<script type="text/javascript"> 

function paste() {  

var sRetrieveData = clipboardData.getData("Text");
document.getElementById('context').value = sRetrieveData;        

}
</script>

By default clipboard access is not enabled on firefox, explanation here. On the other way, execCommand() only process text values and is not Firefox compliant.

Like the others said, the fact that code works on IE is a security risk, any site can access your clipboard text.

The easiest way to copy images relative URL is to use a java applet, windows activeX plugin, .net code or drag and drop it.

Answer 3

JavaScript clipboard access is a security risk and if you (falsely) think you need it you probably need to go back to your design...

Answer 4

Unfortunately, It's not possible to paste an image from your clipboard to the RTE.

If you copy a blob from a desktop app like Microsoft Word that contains an image and some text, the image will turn up as a broken reference (though the proportions will be correct) and the text will be pasted correctly (formatting will be lost).

The only thing that is possible is to copy an image within the RTE and paste back within the RTE.

Answer 5

Thanks for your response. Is there any way to achieve this functionality using the winform user control in web? Am able to copy paste images from the clipboard, the problem being retrieving values from the winform RTE user control.

My requirement being - End user would copy paste some image/text into this control. The corresponding image or text has to be stored in the backend in two fields (image or text) respectively.

Any help would be greatly appreciated.

Many thanks!

Answer 6

Here's a blog post about the subject: Using the clipboard to post images

There's a link to the source code inside the post. They are both from my homepage.

Best regards, Lasse