WYSIWYG: how to Get what you want

WYSIWYG editors, those buttons on a web form that look like a word processor’s interface, are very popular with people editing content on the web, and for very good reasons. For one thing, they allow you to add text styling when editing a page. WYSIWYG editors (ideally) help to create clear, attractive and engaging web pages, which is great.At the same time, we (content editors/developers/site builders) often fight long and hard battles with those same editors to get them to behave how we want. If you’ve ever integrated a WYSIWYG editor into a site or used one to create a piece of web content, chances are you’ve experienced some of these problems. Either the masterpiece of content you styled beautifully in your favorite word processor got completely mangled when pasting it in an editor, or you’ve had to clean up a mess that WYSIWYG editors sometimes create. What You See Is What You Get? Right, if you’re lucky.However, there is a solution. At Agentic, we always recommend writing text in an external application, the doing the actual styling of the text (eg. making words bold or italic) with the WYSIWYG editor after copy/pasting the plain text into the site. By doing this, you avoid losing work or creating more work by having to clean up ugly html or text-and-word-processor-code mashups. Plus, when you add the styling via the WYSIWYG editor’s buttons, that editor will do its best to apply clean web-styling to your text that will show well in browsers.If you are a developer, you can also help (or rather, force) your website’s users to adopt this workflow. The following trick assumes you’re using the WYSIWYG module for Drupal, withÊCKEditor (a very popular WYSIWYG editor in the Drupal world). The WYSIWYG module gives you the ability to change its settings programmatically, using hook_wysiwyg_editor_settings_alter(). Using this technique, you can add the following to your custom module, which forces users to paste their text as plain text. Once they’ve done that, they can continue styling their text using the available WYSIWYG buttons.function YOUR_MODULE_NAME_wysiwyg_editor_settings_alter(&$settings, $context) {Ê if ($context[‘profile’]->editor == ‘ckeditor’) {ÊÊÊ $settings[‘forcePasteAsPlainText’] = ‘true’;Ê }}Note that there are use cases where this approach is not suitable. Websites that publish a lot of previously styled documents need a way to preserve that styling. Otherwise, styling all that content again in a WYSIWYG editor can be a very time consuming task. In these cases, a ‘Paste from Word’ button is probably a better solution than automatically transforming content into plain text when it’s pasted – even though that requires users to follow a two-step process to get their text content into the ediitor.Also note that there are enormous changes underway in Drupal-WYSIWYG land, as part of the Spark project. The next version of Drupal core is set to have WYSIWYG built in, and the Aloha editor (which will be included in Drupal 8; a Drupal 7 module is in development) presents us with some great ways to make WYSIWYG on the web a lot better. In the meantime, this code snippet may make life a little easier for content editors and developers alike.

• Author: Bruno De Bondt