joys sorrows of wysiwyg using drupal

Leo Robert KleinChicagoland Library Drupal Group

12/7/2009

*How I Stopped Worrying and Learned to Love the 'Wyg'

Joys & Sorrowsof

WYSIWYG*

To WYSIWYG or 

Not To WYSIWYG*

*Hamlet Act 3, scene 1, 55

Never! Never! Never! • Brings out the worst in People

("Whaddaya mean I can't use 24 point Gothic in Lime Green?")

• Often: What You See Isn't What You Get (i.e. 'WYSI-NOT-WYG')

• Adds yet another layer of complexity • May still be frustrating given limitations of CMS• Learning how to tag may be a good thing• Not suitable for general public consumption

Yes! Yes! Yes!• Best for those who have little or no experience

posting articles or comments on the web• Text-based tagging potentially a _big_ problem

and can be extremely frustrating (eg trouble-shooting)

• Content Creators more comfortable with MS Word

• Consistent with a more enhanced/interactive online user environment ('cloud computing')

In these cases, going WYSIWYG ensures:• Greater comfort-level• Greater buy-in

World of (Too) Many Choices

WYSIWYG EDITORSFCKeditor, CKeditor, TinyMCE, jWYSIWYG, markItUp, NicEdit, openWYSIWYG, Whizzywig, WYMeditor 0.5,

YUI editor

WYSIWYG INTEGRATION MODULESWysiwyg, FCKeditor, CKeditor

EXTRASIMCE, Image Assist, ImageBrowser

Time out, Time outThe Input Filter!!!

(from the FCKeditor README.txt) Either grant those users Full HTML access or use the following:<a> <p> <span> <div> <h1> <h2> <h3> <h4> <h5> <h6> <img> <map> <area> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong> <font> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <strike> <caption>

Let us reflect...Function: to format & protect

Out of the box comes in two varieties*:• Filtered HTML• Full HTML

      *not counting php

WYSIWYG EditorsGeneral Considerations:• Speed (loading, working)• Browser compatibility • Pasted content from MS Word• Valid html?

 Implementation Considerations:• Which tags/buttons to allow?• Theme friendly?

 Examples:• CKeditor (formerly 'FCKeditor') - ckeditor.com• TinyMCE - tinymce.moxiecode.com

WYSIWYG Integration ModulesHelper Application or Go-between  Old School: Individual integration module for each editor        (eg. TinyMCE module, FCKeditor module, etc.)

New School: One integration module for all!        (eg. Wysiwyg Module)        Advantages of integrated approach:• Need to install only editor• Integrate multiple editors• Provides consistent interface (i.e. API) for other modules

to add their own plugins/buttons

ExtrasAdd-on Image & File Managers: • IMCE (image) - drupal.org/project/imce

• ImageBrowser (image) (demo) - drupal.org/project/imagebrowser

• Image Assist (image) - drupal.org/project/img_assist

• WebFM module (file) - drupal.org/project/webfm

 • Better Formats (input formats) - drupal.org/project/better_formats

Resources WYSIWYG Modulehttp://drupal.org/project/wysiwyg

WYSIWYG Drupal Grouphttp://groups.drupal.org/wysiwyg

Handbook page on Editorshttp://drupal.org/node/255599 

Thank YouLeo Robert Klein leo 'at' leoklein 'dot' com www.leoklein.com (website)www.chicagolibrarian.com (blog)