Forcing Paste-as-Plain-Text in TinyMCE

Written by Cory S.N. LaViska on October 16th, 2008

Make the Paste-as-Plain-Text dialog appear instead of pasting messy code into the TinyMCE editor.

Highlight a portion of a webpage and paste it into a WYSIWYG editor like TinyMCE or FCKeditor. Looks good, right? Now view the source code. It’s usually a mess. Now try the same thing with content copied from a Word document. It’s even worse, oftentimes a sheer nightmare. Sometimes, usually in the case of novice users, I just wish I could make CTRL+V paste plain, unformatted text into these editors. This would encourage users to reformat copied content using the editor, resulting in cleaner, more semantic markup.

Of course, we could attempt to train users to use the built-in Paste-as-Plain-Text or Paste From Word features. Let’s be honest, thought, in most cases it’s simply not going to happen. In even more cases, it’s not going to be appropriate to copy and paste more than just text from a Word document or another webpage. The bottom line is, sometimes forcing plain text is necessary when it comes to JavaScript-based WYSIWYG editors.

The developer of the FCKEditor evidently thought it was a good idea, too, and as of version 1.0 there’s been an option to enable this functionality in the configuration file. Unfortunately, if you Google for this in regard to TinyMCE, it’s hard to come across a clean cut answer to the question.

What you will find is people arguing about why you would want to do this. Others argue that it’s best to clean up TinyMCE’s code on the server side. For security reasons, I totally agree with that, but the majority of posts I’ve read indicate to me that most people are simply missing the point here:

We want to prevent novice users from butchering webpages when they copy and paste formatted content.

The emphasis on prevent is to indicate that you really can’t force a Paste-as-Plain-Text action for all users, so to speak. What you can do, however, is encourage them to Paste-as-Plain-Text using JavaScript, and it’s actually really easy. Here is the code that you’ll need to show the Paste-as-Plain-Text dialog whenever someone presses CTRL+V in the TinyMCE editor:

tinyMCE.init({
    mode: "textareas",
    theme : "advanced",
    // (more init options here)
   
    setup: function(ed) {
       
        // Force Paste-as-Plain-Text
        ed.onPaste.add( function(ed, e, o) {
            ed.execCommand('mcePasteText', true);
            return tinymce.dom.Event.cancel(e);
        });
       
    }
});

As with virtually everything JavaScript, there are a few drawbacks. First off, it relies on the onPaste JavaScript event, which is supported in Internet Explorer, Safari (and other Webkit browsers), and Firefox 3 (but not 2). It is not supported in Opera. For folks with unsupportive browsers, they will still be able to paste as usual (including unwanted, messy markup).

Note: You may want to remove the normal Paste button from the toolbar so people don’t think that it doesn’t work properly.

Of course, it’s important to run your code through a server side filter upon submission, but hopefully this will, at least in the mainstream browsers, limit the number of copy and paste nightmares that have plagued WYSIWYG editors since day one.

Comments

Instead of using all these, we can use directly the web tool called "wordoff" (http://wordoff.org/), directly copy from a word document or any other document, on a single press of a button it will remove all the unnecessary junk and will generate clean HTML.

#1 Vivekanand on Oct 17th, 2008

@Vivekanand Great tool, thanks for the link. Alas, this isn't something that novice users will benefit from, as most of them simply don't understand why they can't just "copy and paste" content from Word and other sources.

#2 Cory S.N. LaViska on Oct 17th, 2008

Cool, seems to work. Would be nice if it just did the paste without poping up the paste dialog window.....
Should stop my clients complaining about ugly formatting (here's hoping anyway).

#3 Olmec Sinclair on Nov 29th, 2008

It would be nice if the popup "paste from text" was pre-filled with the current buffer

#4 Jim on Dec 3rd, 2008

thanks a lot,
nice trick...

#5 mondfish on Dec 30th, 2008

For the onPaste trouble, I rely on checking if Ctrl is pressed and hasn't been unpressed (via keycodes) and listen for V's keycode onkeypress.

#6 Elijah Grey on Jan 4th, 2009

Add a comment

Name*

Email*

Never, ever sold or spammed :)

Homepage

Comment*

Sorry, plain text only :(