Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can one hack "paste image" support into a textarea in Firefox?

I was reading through this article about image pasting in Chrome and Firefox.

To recap, Firefox does not provide any information about the image pasted, the "paste" event handler gets a null clipboardData object.

To work around, one places an invisible contenteditable div in the DOM and always keeps it in focus, when stuff is pasted it triggers a timeout that checks the contents of the invisible div to grab an image handle.

Is there any way to hack stuff using magic iframes or what-not, short of replacing the textarea with a contenteditable div, to get paste-image-support in Firefox?

(note: Java and Flash solutions are out of the question)

like image 350
Sam Saffron Avatar asked Jan 04 '13 04:01

Sam Saffron


1 Answers

<div id="paste" contenteditable="true"></div>

Insert this item into your html then call the following

var pasteDiv = $("#paste")[0];
document.body.onpaste = function (event) {
    pasteDiv.focus();
    //do your magic firefox here
};

The onpaste fires here because you have your contenteditable div and you can then tell firefox where to focus this clipboard data. (without having at least one contenteditable item the onpaste doesn't fire)

For a working sample see: https://gist.github.com/4577472

like image 117
Buildstarted Avatar answered Oct 19 '22 20:10

Buildstarted