Using WYSIWYG Editors in a Microsoft Word World

If you're like me, you cringe a little whenever your users ask for a WYSIWYG editor. It's a shame because users love entering content into something that looks like Word!

But what your users don't know is that WYSIWYGs can be dangerous. Knowing what happens if they fall into the wrong hands, WYSIWYG editors can feel like putting an exhaust vent on the Death Star.

Like let's say one of your site's content editor comes along and wants to make some content. They've drafted their work in Microsoft Word and set everything in Comic Sans. They don't see Comic Sans in the WYSIWYG editor, so they try copy and paste.

Oh joy! It looks exactly the same in Drupal! Now this may look good to your content editor, but it doesn't match any of the other content on the site. To some visitors, it might signal that you guys don't know what you're doing.

Unsurprisingly, you do not approve. After you crafted and honed your Drupal site someone has subverted your WYSIWY editor to create a page full of HTML garbage.

But beyond the front end and HTML issues you may also see visible errors in Internet Explorer, adding insult to injury.

So, how do you prevent your content manager from unwittingly giving your site a black eye? There are a few ways, but my favorite way is to use the WYSIWYG module in combination with TinyMCE. As of version 3 they've added a nearly fool-proof Word formatting filter.

To set it up, install the WYSIWYG module and a recent version of TinyMCE. Then, create a profile for an input format that is just for WYSIWYG.

Once you create the profile, open up the “Buttons and plugins” field set and enable the “Paste from Word” button. Then, under “Clean up and output” check off “Verify HTML”, “Apply Source Formatting” and “Force cleanup on standard paste”.

The last step is the most important. It essentially forces users to use the “Paste from Word” option, even if they don't want to. Also, it's worth noting that TinyMCE filters out the Word-only comments that sometimes break pages in Internet Explorer.

Now, when your content editor tries to copy and paste their Comic Sans masterpiece, everything filters nicely and your Drupal site has been saved. But as we all well know, no system is 100% fool-proof, so we need a fail safe.

Specifically, we need to add a filter to the WYSIWYG input format. The FlexiFilter module is by far the most versatile filter module there is, and I wrote a preset for it that will filter out of Word's HTML garbage. You can find the FlexiFilter preset in my last blog post.

To set up this custom filter, just enable the Flexifilter module, and then proceed to the Flexifilter section under Site Building and click on the “Import a flexifilter” tab. Two things to keep in mind:

Firstly, The HTML filter component of this preset should be adjusted to match the HTML tags allowed in your WYSIWYG profile.

Also, if you're using WYSIWYG to assign classes, this preset will filter them out. You should turn the third component of the filter off if that's the case.

The last thing I want to mention is that none of this would really be necessary if we just made a WYSIWYG editor our content editors felt comfortable drafting content in. So whenever you install a WYSIWYG, I highly suggest including a Spellcheck module. Your content editors will thank you for it.

(This post is actually the slides and notes from my Ignite Presentation at DrupalCon 2011. To watch a video of it and see the other amazing session, check out the YouTube video or check out the Ignite blog.)