Is there today with HTML5 a way to copy to clipboard, without browser plugins (and so without Flash nor java) nor short-term hacks, an image built in a canvas ?
The copy to clipboard would be initiated by javascript but having user confirmation or a dialog isn't a problem.
Solutions which don't work in Windows and Linux, or which don't work at least in Chrome and Firefox are without interest to me.
Ideally I would prefer a solution that doesn't impose to display the image (which is built in memory with document.createElement('canvas')) but that's not an absolute requirement.
As far as I'm aware, the Clipboard API is the only specification in this area. I've never used it and don't know how widely it's supported, but I suspect not widely. According to this quick and dirty test, the current versions of Chrome and Firefox fire the copy event. I believe the user has to initiate the copy (e.g., you say "press Ctrl+C to copy").
IE makes window.clipboardData available, but as far as I know you're limited to text and URLs.
So sadly, I think this is one of those answers that's basically: No, not yet.
Related
I know there are lots of javascript plugins and libraries to allow users to pick emojis for text inputs, but windows and mac already have native emoji pickers (⊞ Win. or CTRL⌘Space), Is there a way for me to open these native emoji pickers when a user clicks in a text field instead of installing plugins in my website?
I already tried emulate button key press, but it didn't work at all.
Short answer is no.
In order to access any OS feature from javascript, you need a corresponding browser API to support.
AFAIK, there isn't an API for that. There's a discussion here which suggests adding <input emoji /> to standard but seems no traction gained.
Edit: Below is my original answer, revised. Comments pointed out I was focusing on the wrong aspect of the question, I totally agree.
However, the OP obviously has some wrong idea about what you can do in javascript to leverage browser ability. So I think it's still worth clarification.
You can't send arbitrary emulated keyboard event from js and hoping the OS will respond. Were it possible, it'd be a severe security issue on browser's part. Imagine open a website and it fires a series of keyboard event to your OS and wipes out your desktop (totally feasible through shortcuts).
You need to understand the runtime env inside the browser is basically isolated from the one of native OS. Whatever OS feature that's accessible to your javascript is totally up for browser vendors to decide. For security reason, they are super careful in making these decisions.
Also, make a distinction on "what browser can do", and "what browser allows you to do in js". Seeing Chrome has an "Emoji & Symbols" context menu item, doesn't necessarily mean it decides to grant you the same ability in js.
To further clarify why the emulated keyboard event is fundamentally different from the native one, I include a graph here. The blue arrow is how emulated keyboard event flows. The farthest place it can reach is the browser's internal event bus. It never got a chance to reach the OS event bus, so no way to notify native emoji picker.
It seems to be impossible to copy text and then paste it into a TinyMCE editor using right-click paste with Firefox if you have the "paste" plugin. Why is this?
I'm using:
Firefox 33.1.1 (although users have complained of the issue with FF 29)
TinyMCE 4.1.1 with the "paste" plugin
I can right-click paste into these without error:
an element with the contenteditable="true" attribute (same method as TinyMCE), tested on http://html5demos.com/contenteditable
a normal textarea
TinyMCE 4.1.1 without the "paste" plugin
Users have discussed on the TinyMCE forum as far back as 2007, and mention an alert that says "Copy/Cut/Paste is not available in Mozilla and Firefox" which I do not receive with FF 33. No one mentions why this problem occurs, and the TinyMCE admins claim "this is not a bug". I'm interested in knowing what change was made to either Firefox or TinyMCE that causes this, and why (security?).
This question -- tinymce mouse paste not working -- has an answer of how to fix the issue: remove the "contextarea" plugin or any plugin that is based on it. But I'm interesting in knowing why it happens in the first place.
A co-worker got me on the right track and I found these two links:
https://developer.mozilla.org/en-US/Firefox/Releases/29/Site_Compatibility#Security
The removal of allowclipboard policy support broke the copy/paste buttons on some rich text editors like CKEditor. The standard Clipboard API's click-to-copy support will be implemented in the near future. The general keyboard shortcuts, Ctrl+C and Ctrl+V, should always work.
http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard
By default, JavaScript is not allowed to read or set your clipboard data for security and privacy reasons. This is because websites scripts can erase and replace what you currently have in your clipboard (data loss issue) and they can read whatever you have in your clipboard (security and privacy issue); as such, you should grant access with caution.
Maybe someone with TinyMCE expertise can provide more information on how it accesses the clipboard.
Good follow-up questions might be: Why don't the other browsers do this? Why is ctrl+v safer?
I need to disable fullscreen message ("you've gone fullscreen") coming on the top when chrome fullscreen mode is activated .
i need to do it through javascript . but it's one of the default functionality of chrome.
can any one help me out ?
It's not possible. As you pointed you it's one of the default functionality of chrome.
and I agree with the comment by mic You can't it's there for security
That message is, if you it can be disabled at all, likely a user preference. I have had my fair share of changing that kind of things for a custom "layer" over windows with an integrated browser and I can tell you it's impossible with javascript without some listener app. We created a C# listener app for that kind of thing that keeps checking a certain text file. We made javascript edit the text file and then let C# work it's hacking magic in some of the user's settings.
You could take a look at Chromium, the stripped down version of Chrome, if that would be of any help ;)
ps: To all the people going mental over changing user settings like that, our customers were old people that were unable to use a computer, and our application's purpose was to do as much as possible for them.
You cannot possibly do that as suggested by these links.
https://superuser.com/questions/398945/disable-the-youve-gone-full-screen-notification-in-chrome
https://groups.google.com/forum/#!topic/chromebook-central/h1crbhOy-7U
On the other note, why exactly would you want to do that?
I'm building an in-browser application for my company's internal use. It would be helpful if my users could quickly switch between 6 different browser dimensions. I've tried using window.resizeTo, but it seems most modern browsers are disabling any sort of coded resizing. Safari seems to be my only exception for Mac users, but I'm concerned that they too will follow suit with Chrome and FF.
Is anybody aware of any work-arounds or user opt-ins? I've found a Chrome extension that can get the job done, but ideally there wouldn't have to be any sort of configuration or 3rd party extensions as some of my users have very strict permissions on their machines.
No, that's not possible. Otherwise all kind of ads would ask the user to allow them to resize themselves in the hope some people allow it (and thus most likely allow it for the whole adserver used by tons of websites).
You could wrap your application's content in a <div> with overflow: scroll, and resize that actual div. If your application's styles do not allow that, you can wrap it in an <iframe> with the viewport size you want to enforce.
I am trying to make a web page which allows users to drag and drop images into Microsoft Office applications, specifically Powerpoint.
By default (as of FF3.5), Firefox will insert the source URL when an image is dropped rather than the image itself. After adding the following Javascript/jQuery code (derived from https://developer.mozilla.org/En/DragDrop/Drag_Operations),
$('img').attr('draggable', true).bind('dragstart', function (event) {
event.originalEvent.dataTransfer.effectAllowed = 'copy';
});
dragging and dropping works from Firefox to Word and Excel, but not to PowerPoint. For an example of what happens, see http://slides.html5rocks.com/#drag-and-drop. I have tested this with FF3.6 and FF9.
How can I make it work with PowerPoint?
Just drag'n'drop outside the boundaries of the ppt slide (to make sure you're not dropping on a predefined textbox) - and release the mouse button -no coding needed!
Firefox drag will drop the image at the center of te ppt slide.
Status quo
Sadly there is nothing you can do from within your browser and the application to enable drop support for PowerPoint.
This is something that needs to supported at source level in PowerPoint (and it seem to be if you don't drop the image on an existing element but right outside the slide frame you want to drop it onto - but probably depending on version).
If it (for some reason still) does not support the image part of the drop but just the link (and if there is no option provided for changing this behavior) there is little to do but to hope Microsoft will update PowerPoint with this support in the future, - or - check the following options for work-arounds if needed:
Add-ins
You can look into writing an add-in (or possibly just use a macro - you might need to lower security to medium [PDF] for macros) for PowerPoint that will take the link that is dropped and replace it with the image the link refers to.
Here is one place to get you started making add-ins if this is a viable option.
Here is a commercial framework that makes creating add-ins very simple.
(disclaimer in this regard: I am here assuming this will be possible due to add-ins such as this which allow you to show a live web page inside PP).
Pipe-line / work process
There is also the option of injecting a third-party applications in the pipe-line to do screen snapshots of the image and have it inserted automatically into PP.
SnagIt is such an application (and there are probably others) and it has free extensions that will allow you to integrate "snags" directly with PowerPoint.
Or (the perhaps too obvious option): simply copy the image in browser and paste it into PowerPoint.
What is your version of Powerpoint?
It's very important because image format support may be lacking.
If that's the case your code needs a minimum version warning addition.
Could also ask to convert image to suitable format.
It may even be the case that it's impossible to the version of Powerpoint you're using to support this in the way you want.
You could try to use html code.
This code might help you:
http://classroomtech.org.uk/2008/08/drag-and-drop-in-powerpoint/
Other possibilities are OLE object with a link to a image.
Could check how other Microsoft applications, that do something similar, handle things.
If that doesn't work you could try to generate an OLE object with a link to the image in it.