Prevent a copy/paste to copy the style of a web page to a Rich Text Editor

Question

Hi,

I'm trying for two days now several JavaScript lightweight Rich Text Editors (rte) such as nicEdit, mooEditable, MooRTE (the two last ones were considered because they use the mootools framework which I'm using for this project).

My problem is that with all of them, when I copy a pre-formated text from a web page (with words in bold, links etc...) and then paste it into the editor, it appears already formated.

This could be nice but that's a security problem because if I copy/paste a whole web page it will render the whole web page in the editor.

I just want my users to be able to do some basic formatting with the editor such as putting some text in bold, italic, add a link and indent their paragraphs.

An alternative could be showdown (which - I would bet - is used by stackoverflow), because this type of editors (with a preview box) don't suffer from the aforementioned issue (when you paste something in the textarea, it is unformatted text). However, I'm not sure this would be appropriated to my case because the editor would be used to write long articles (much longer than most of the stackoverflow posts). In that case I think it would be better to have a proper editor that renders things instantly (I mean right in the textarea, not in a preview box). And a real WYSIWYG editor is more enticing and easy to use, in my opinion.

Is there a easy way to modify a RTE so that when I paste some text it is rendered unformatted? Or do you think I should use the sort of solution that stackoverflow uses? (showdown or similar) Or do you know a RTE that doesn't have the copy-paste issue that I mentioned?

Note that I didn't try CKeditor, FCKEditor and TinyMCE because they are far too complex(heavy) and the one from YUI looks good but needs the whole library to work.

Thanks,

FuzzyTern

Answer 1

You are copying from a rich text source and pasting into a rich text destination. By default you will get rich text in the destination. The only way around this is to capture the paste event somehow, redirect the paste operation into a plain text field, then copy the unformatted text out of the plain text field into your rich text destination.

1. Use the onPaste handler to capture paste events (doesn't work in Firefox or Opera)
2. Use a hidden field to paste the selected text into.
3. Insert the value of the hidden field into the rich destination at the cursor location.

Not sure where the profit comes from, but there you go.