Blog / 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.

Comments

  • Paste Format module

    Bruno,

    There is much more user-friendly (meaning content editor friendly) alternative - Paste Format module I developed - http://drupal.org/paste_format

    It allows to clean up the pasted text and remove all not needed and ugly markup and styling tags while keeping what is needed. Filtering is done via an input format system - you have to create an input format and set it up on the module settings page (it will apply the site default one if this setting is not set).

    Thanks
    AndyB

  • Nice tip! Also I struggled a

    Nice tip! Also I struggled a lot with adding new styles in the wysiwyg editors. Like adding 2 or 3 column layouts in pages. As well as nice looking quotes, etc..
    I use
    $settings['stylesCombo_stylesSet'] = 'myPoject:' . base_path() . drupal_get_path('module', 'myModule') . '/ckeditor.config.js';
    in the same hook.
    And then follow the instructions on http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles

  • CKeditor

    It's probably worth mentioning that the CKeditor module has a setting to "Force pasting as plain text ." If enabled, HTML content will be automatically changed to plain text when pasting.

Leave a comment

(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.

Sign up for updates