Problem summary

The user wants to add formatted text content, but does not have the know-how to write HTML.

Example

Usage

• Use when you want to give the user a clear indication of how his or her content is going to look like when it is published. WYSIWYG is short for What You See Is What You Get.
• Use when the users of a site is not comfortable in formatting text by using HTML codes, a markup language such as textile or markdown.
• Use to lower the barrier of letting your users add formatted content to your site.
• Use when you want an easy way to integrate media into the formatted content of your site that does not require HTML or any other syntax knowledge.
• Use when the user is inclined to spend time correcting small layout details of his or her writing. As the user can see the formatted result as they edit it, they are boosted with confidence and allows for quick and good looking results fast.
• Do not use if you want to keep the HTML syntax clean. Many WYSIWYG editors are known to produce horrible HTML code.
• Do not use if you want the editor to function in all browsers. WYSIWYG editors rarely support all browsers, and if they do, it is often only the latest releases of the browsers.

Solution

Use one of many javascript libraries to convert <textarea/> HTML fields into fully functioning WYSIWYG editors. The result will be an input, where the output is shown formatted on the screen to the user, but is formatted as HTML when the content of the field is sent to the server to be stored in a database.

Customize the ditor for your needs. Disable unneeded functions. You might choose not to allow image inserts, tampering with font color or size – or even force the user to only use a predefined list of CSS classes.

Rationale

WYSIWYG (What You See Is What You Get) was initially introduced in word processors such as WordPerfect and Microsoft Word. It was then a revolutionary way to write documents, where the editor on the screen mimicked the result in print.

It has later been introduced in forms on the web. Here, long text has from the beginning been inserted into <textarea/> fields, that features no formatting options what-so-ever. Here, WYSIWYG editors were introduced trying to mimic what was later to be seen on screen.

6 Comments

• 1
  

  Shahar

  7 Feb, 2008

  I’d have hoped that the site would do more to promote good usability practice, not just document common techniques.

  Dropdowns for navigation is #1 poor usability design. Getting rid of the ‘Go!’ button is #2.

  A reference for Good techniques and practices would be very useful. A library that doesn’t discriminate between good and bad practice will just compound the interface problems that already exist.

  (apart from that that, this is a very nicely put together site and if the content is chosen carefully would be a great resource)

• 2
  

  Janko

  26 Mar, 2008

  I agree with Sharar. This technique shouldn’t be used. It is in contrast with good UI design best practices.

• 3
  

  Gustav

  28 Mar, 2008

  Great, but some links to JS libraries would be useful.

• 4
  

  Anders Toxboe

  30 Mar, 2008

  Gustav: The links are already here. Check the links under “See it in action” in the sidebar.

• 5
  

  Job Search Guy

  2 Mar, 2009

  does anyone know how i can remove the text styling when content is pasted into an editor?

• 6
  

  Jon Scalet

  2 Mar, 2011

  For functionality and overall ease of use the other good options out there are tiny and ckEditor. We actually made the switch to ck because of the poor usability of tiny. Just my $.02 for anyone looking into WYSIWYG editors.

Post a comment