Forcing Paste-as-Plain-Text in TinyMCE

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.

Author avatar

About the author

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.