4

I have a small text editor in my home page ( a textarea ) where I can paste text. How can I get this text in a variable before it would be pasted? I know that there is this function:

clipboardData.getData()

but it doesn't work in Firefox, and I want something for all the browsers.I am using HTML and Javascript.

thanks

Andrew Barber
  • 39,603
  • 20
  • 94
  • 123
novellino
  • 1,069
  • 4
  • 22
  • 51

2 Answers2

5

The short answer is that in general you can't get the text before it is pasted. What you can do is what big web-based WYSIWYG editors such as CKEditor and TinyMCE do, which is:

  1. Detect a Ctrl-v / shift-ins event using a keypress event handler
  2. In that handler, save the current user selection, add a <div> element off-screen (say at left -1000px) to the document, move the caret to be inside that div, thus effectively redirecting the paste
  3. Set a very brief timer (say 1 millisecond) in the event handler to call another function that retrieves the HTML content from the div and does whatever processing is required, removes the div from the document, restores the user selection and inserts the processed HTML.

Note that this will only work for keyboard paste events and not pastes from the context or edit menus. By the time the paste event fires, it's too late to redirect the caret into the div (in some browsers, at least).

Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • what I actually want is to change this text. So do you have in mind any way to paste in a hidden textarea maybe and then change the text there is there? – novellino Dec 06 '10 at 11:33
  • The fact is that I am using already another way for paste with Ctrl+V. I want somehow to do it now for the right click and Paste selection. – novellino Dec 06 '10 at 11:41
  • You can equally well move the selection into an off-screen textarea instead; this is what TinyMCE and CKEditor for their paste-as-plain-text options. For pastes from the context or edit menus, I'm afraid you'll have problems in some browsers as I mentioned in my answer. The obvious workaround is to handle the `paste` event and display a dialog containing a textarea for the user to paste into. – Tim Down Dec 06 '10 at 11:56
  • Could you show me some code of how to redirect the paste in another div? Thanks – novellino Dec 06 '10 at 12:51
  • It's relatively complicated and I don't have a standalone example to hand. You could take a look at the relevant part of the CKEditor source: http://svn.ckeditor.com/CKEditor/trunk/_source/plugins/clipboard/plugin.js – Tim Down Dec 08 '10 at 15:01
  • What about I need html and text both? – virsir Sep 10 '12 at 02:20
  • @virsir: You'd need to allow the HTML to be pasted and then extract the text-only version from the resulting DOM. – Tim Down Sep 10 '12 at 16:17
1

Getting the clipboard to work across all browsers is tricky and I believe it's safe to assume there's no way to make it work with only JavaScript, unless you're targeting one specific browser (usually IE). I used ZeroClipboard for this: http://code.google.com/p/zeroclipboard/ - it seems to do its job OK.

mingos
  • 23,778
  • 12
  • 70
  • 107
  • Thanks, but I will try to avoid Frash. If I will not find any other way I will try this one. – novellino Dec 06 '10 at 14:35
  • I was reluctant to use it as well, but found no valid substitutes. If you have more luck, please share the word, I'd be happy to switch to a non-Flash solution as well. – mingos Dec 06 '10 at 18:55