javascript execCommand("paste") not working - javascript

document.execCommand("Paste") doesn't work!
"Copy" and "cut" works fine.
var editor = document.getElementById("ta1");
editor.focus();
editor.select();
var successful = document.execCommand("Paste");
var msg = successful ? 'successful' : 'unsuccessful';
alert('Pasting text command was ' + msg);
This alerts "unsuccessful" on paste, but "successful" on copy and cut..
I use the "copy" another place on my webpage, and the whole thing works like a charm, but I need to get "paste" working as well..
I'm using Chrome (no extension, just a regular webpage).
Any ideas?

For security reason, it is blocked in chrome.
Even office 365 asks to their users to use shortcuts ctrl+c/ctrl+v instead of copy.
this function is only available for chrome extension now.
if the text you want to copy has to be paste on the same page then just store the text in a variable, you can then use the following command to paste
document.execCommand('insertText'
but you need to focus the textarea first
and to copy the selection https://developer.mozilla.org/fr/docs/Web/API/Window/getSelection
full example
https://jsfiddle.net/bormat/9a8nuzse/2/

This is clearly mentioned in Mozilla Documentation of Document.execCommand()
that:
paste
Pastes the clipboard contents at the insertion point (replaces current selection). Clipboard capability must be enabled in the user.js preference file. See 1.
1 Before Firefox 41, clipboard capability needed to be enabled in the user.js preference file. See A brief guide to Mozilla preferences for more information. If the command wasn't supported or enabled, execCommand was raising an exception instead of returning false.In Firefox 41 and later, clipboard capability are enabled by default in any event handler that is able to pop-up a window (semi-trusted scripts).

I had a same issue. hence as work around I used below code, its working with some limitation. give a try :)
navigator.clipboard.readText().then(function(text){
document.execCommand( "insertHTML", false, text || "");
});

Related

Is it possible to get copied file from explorer in javascript?

I have worked on a chat feature where the requirement is to get copied images on paste them from file explorer (like skype desktop). e.g I CTRL+C an image file then CTRL+V on Chat textarea.
But I get images only from the clipboard.
From file explorer, it is not working.
Here is a demo screenshot.
Try some of those https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard - either the new (and still somewhat experimental) navigator.clipboard api or the old document.execCommand function.

Is there an equivalent to window.clipboardData in Microsoft Edge?

In our application, we have a custom paste function that calls window.clipboardData.getData("Text") to get the current clipboard data. It then performs some functions on this data. In Edge, window.clipboardData is undefined. It does seem that getData works when used within the "paste" event though such as the following.
document.addEventListener("paste", function(e) {
var test = e.clipboardData.getData("text/plain");
});
I potentially can design a workaround that will involve this overriding of the paste event, but it would be non-ideal. A solution that can be called outside of an event would be preferable.
As an aside, I read that Edge did not support the clipboard API at one point, but my understanding is that this is fixed, so please find something specifically sustantiating the current functionality (e.clipboardData working but no equivalent to window.clipboardData existing if that is your answer.
Edge, like all modern browsers uses the official ClipboardEvent::clipboardData:
inp.onpaste = evt =>
console.log(evt.clipboardData.getData('text'));
<input id="inp">
Go with it. The deprecated and non-standard window::clipboardData should only be used as a mean of legacy support, for older versions of IE.
As to what you wish to do, (paste without user interaction), that goes against the specs recommendations for privacy. You won't be able to do from web-content. You'll need to run your script from an high-privilege script, like an extension.
• Implementations must not let scripts create synthetic clipboard events to get access to real clipboard data (unless the user has configured it to do so).
As Kaiido noted, it is not possible to get at the pasted content outside of the paste event in Edge (and Chrome for that matter).
Users previously used a custom right-click menu to access "Paste From Excel" functionality to replace content in an editable grid with tab-delimited content from the clipboard. If window.clipboardData is undefined the user received a message saying that you must use the standard CTRL+V paste in this browser.
I then added the listener below which essentially determined if the content was tab-delimited and treated it as a "Paste from Excel" whereas it treated other data layouts as a standard "Paste". This was sufficient for my deployment, but for others, it may be worthwhile to launch a confirm window to verify intention.
document.getElementById(myGridID).addEventListener("paste", function(e) {
var clipboardContent = window.clipboardData ? window.clipboardData.getData("Text") : (e.clipboardData ? e.clipboardData.getData("text/plain") : "");
if(clipboardContent != null && clipboardContent.indexOf('\t') >= 0)
{
MyExcelPasteFunction(myGridID, clipboardContent);
e.preventDefault();
}
});

How much of the Clipboard API can I use within the Paste event of CKEDITOR?

I'm trying to read the clipboardData attribute of a paste event for a plugin that I'm developing for CKEditor 4.
I've established that, in Chrome, if I listen to the document object for a paste event, then the event object I get passed in the handler will contain the clipboardData attribute. I was surprised to see the same is not true of Firefox (v20).
This is the code I'm using in my CKEditor plugin, although I don't believe this to be an question relevant only to CKEditor. In Chrome I see the clipboardData object, in Firefox I do not.
editor.document.on('paste', function(event) {
var clipboardData = event.data.$.clipboardData;
if (clipboardData) {
console.log(clipboardData);
}
});
I can't see anything on the MDN site confirming if this is yet supported, I also believe that IE10 is meant to support this, but will it work on a standard API?
Edit:
I should have made this clear from the start, but I'm trying to develop support for pasting images, so I need to read the clipboard data as a file.
If you want to get clipboard data in paste event,these can help you:
The W3C Standard (Chrome):
event.clipboardData.getData(type)
You cant get type frome event.clipboardData.types,which is usually "text/plain".
http://www.w3.org/TR/clipboard-apis/
IE:
window.clipboardData.getData(type)
Type can only be "Text" or "URL":http://msdn.microsoft.com/en-us/library/ie/ms536436%28v=vs.85%29.aspx
Firefox:
There is no api to access clipboard in ff.If you want to realize it,you can try some other way,which is depending on what you want to do.
It is indeed a CKEditor only question. The thing is that your reading the base Javascript event. But your missing the CKEditor layer that the developers of CKEditor made for you..
They already took care of the difference between the browsers. And the only thing that you need to do:
var clipboardData = ev.data.dataValue
You should play with clipboard data on paste event:
editor.on( 'paste', function( event ) {
console.log( event.data.dataValue );
});
You can modify event.data.dataValue to manipulate pasted content. Also note that priority matters because pasted data is pre-processed during pasting phases. So you can "inject" your changes at different stages by specifying a numerical listener priority:
editor.on( 'paste', function( event ) {
console.log( event.data.dataValue );
}, null, null, priority );
In Ie,We can use all clipboard API ,while in chrome and firefox can only be used where fire paste event.So users can't user clipboard api to copy something from the website while use in there office,msn..

Can I paste image data with JavaScript? [duplicate]

This question already has answers here:
How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?
(3 answers)
Closed 3 years ago.
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?
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+?
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+?
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
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.
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.

Paste an image from clipboard using JavaScript [duplicate]

This question already has answers here:
How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?
(3 answers)
Closed 3 years ago.
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?
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+?
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+?
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
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.
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.

Categories

Resources