Paste only plain-text into editable div

Question

i need to be able to allow a user to paste into an editable div (via whatever the user chooses: right-click and paste, shortcut key, etc), but i want to discard formatting and only take the plain text.

i can't use a textarea since the div will allow basic formatting (bold and italic) if applied by user-initiated events.

the onbeforepaste event looked promising, but according to quirksmode the support is so limited as to be unusable.

tyia for any suggestions

Answer 1

This is tricky but not impossible. What you can do is quite involved and a bit of a hack that will work in Firefox 2+, IE 5.5+ and recent WebKit browsers such as Safari 4 or Chrome (untested on older versions). Recent versions of both TinyMCE and CKEditor use this technique on their iframe-based editors:

1. Detect a ctrl-v / shift-ins event using a keypress event handler
2. In that handler, save the current user selection, add a textarea element off-screen (say at left -1000px) to the document, turn contentEditable off and call focus() on the textarea, thus moving the caret and effectively redirecting the paste
3. Set a very brief timer (say 1 millisecond) in the event handler to call another function that stores the textarea value, removes the textarea from the document, turns contentEditable back on, restores the user selection and pastes the text in.

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

Answer 2

thanks both - should get me going in the right direction

tried to mark the answers as useful but apparently i'm too new :/