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?
-
6AJAX is generally considered a technology... has an actual web dev organization seriously named themselves AJAX? They're just asking for trouble.Matchu– Matchu2009-08-04 21:12:33 +00:00Commented Aug 4, 2009 at 21:12
-
2Well, considering the name AJAX was ripped off from a mythical greek warrior (no matter what they claim it's an acronym of) what's another layer of ripping off?GenericMeatUnit– GenericMeatUnit2010-02-04 13:18:37 +00:00Commented Feb 4, 2010 at 13:18
Add a comment
|
6 Answers
Because this question still often shows up in Google's search results, I want to point out this is possible today, at least in Google Chrome (2011) in all modern browsers (2018). They implemented it to use in GMail, but it is available for all websites.
How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?
3 Comments
user66001
It is now possible in other browsers. I am using FF17 and can use imgur.com's paste from clipboard functionality
Alex S
@Mr5o1 that worked perfectly for me you should post it as its own answer
Mr5o1
@AlexS hardly seems worh it, maybe OP could add it to this anser.
To help others, I'll leave the link here with the answer made by Nick Rattalack
// window.addEventListener('paste', ... or
document.onpaste = function(event){
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
for (index in items) {
var item = items[index];
if (item.kind === 'file') {
var blob = item.getAsFile();
var reader = new FileReader();
reader.onload = function(event){
console.log(event.target.result)}; // data url!
reader.readAsDataURL(blob);
}
}
}
How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?
2 Comments
Polv
url.createObjectURL somehow create only a URL working in that session, but not for storing in database. FileReader() works very well for base64 image.
Armen Michaeli
You can totally store a blob in a database using
XMLHttpRequest, without any FileReader usage. You can also store any URI (including URLs) in a database in the same fashion, and storing a URI with data scheme will actually store the resource itself (since that is how data URIs work). What you are trying to describe is that a URL obtained through a call to URL.createObjectURL will only work within a particular "session" (depending on user agent) making it meaningless outside that session, e.g. when issuing a request to store some resource in a database.This is definitely possible now in Chrome and Firefox. I'm not so sure about IE/Safari.
Look at imgur.com, onpaste, and pasteboard.co as examples, and see the code for pasteboard on github as well as Joel's excellent write up on his blog
For the record, you need the user to press Ctrl+V on your element, and then you can capture the data in the paste event handler by reading from event.clipboardData but to make it work down-level, you need to be sure focus is on an empty contenteditable element, and pull the results from there, which doesn't work well in Firefox 22. See here
Comments
New browsers, like Firefox 4, support pasting of image data from clipboard into a RTE as Data URI with encoded PNG Data. However, most web applications incorrectly parse these Data URIs and discard it. Yahoo mail properly handles. However Gmail and Hotmail discard it. I have notified Google and Microsoft about this.
Comments
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 if 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.
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.
