Joys Sorrows of Wysiwyg using Drupal


Published on

The Joys and Sorrows of implementing WYSIWYG in a Drupal environment, reasons for and against doing and my experience from a recent project.

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Best for those who have little or no experience posting articles or comments on the web - Particularly where the gulf between their experience and the possibility of learning html tagging potentially is insurmountable obstacle Text-based tagging potentially a _big_ problem and can be extremely frustrating (eg trouble-shooting) Content Creators more comfortable with MS Word   Makes sense as we move to a more enhanced and interactive online experience
  • WYSIWYG EDITORS   YUI editor - from Yahoo, also another ('Closure') from Google using basically the api/buttons from GoogleDocs. INTEGRATION MODULES   Need some mechanism to connect or integrate these editors-libraries into Drupal.   EXTRAS   Content management of files making up the page -- anything from images to attachments
  • INPUT FILTER Original and most basic formatter
  • General Considerations: Speed (loading, working) - Editors consist of countless pages of include pages (javascript, images/buttons, css - big time) Browser compatibility - only works in IE6? Pasted content from MS Word - works or is a complete mess Valid code?   OVERALL TREND: trimmer, faster editors, compatible over a wider range of browsers, producing valid code and even may meet accessibility requirements Functionality in keeping with Cloud Computing applications    
  • WYSIWYG Integration ModulesNeed for 'helper' module to go between the WYSIWYG editor and Drupal Old School: first upload the editor, then upload the editor-specific integration module. Wysiwyg API not only replaces all editor integration modules, but also unifies the integration for all other Drupal modules in contrib by providing a central API to supply plugins/buttons that work in any editor (even if there is none).
  • Joys Sorrows of Wysiwyg using Drupal

    1. 1. Leo Robert Klein Chicagoland Library Drupal Group 12/7/2009 Joys & Sorrows of WYSIWYG* *How I Stopped Worrying and Learned to Love the 'Wyg'
    2. 2. To WYSIWYG  or  Not To WYSIWYG* *Hamlet Act 3, scene 1, 55
    3. 3. Never! Never! Never! <ul><ul><li>Brings out the worst in People (&quot;Whaddaya mean I can't use 24 point Gothic in Lime Green?&quot;) </li></ul></ul><ul><ul><li>Often: What You See Isn't What You Get (i.e. 'WYSI -NOT- WYG') </li></ul></ul><ul><ul><li>Adds yet another layer of complexity </li></ul></ul><ul><ul><li>May still be frustrating given limitations of CMS </li></ul></ul><ul><ul><li>Learning how to tag may be a good thing </li></ul></ul><ul><ul><li>Not suitable for general public consumption </li></ul></ul>
    4. 4. Yes! Yes! Yes! <ul><ul><li>Best for those who have little or no experience posting articles or comments on the web </li></ul></ul><ul><ul><li>Text-based tagging potentially a _big_ problem and can be extremely frustrating (eg trouble-shooting) </li></ul></ul><ul><ul><li>Content Creators more comfortable with MS Word </li></ul></ul><ul><ul><li>Consistent with a more enhanced/interactive online user environment ('cloud computing') </li></ul></ul><ul><li>In these cases, going WYSIWYG ensures: </li></ul><ul><ul><li>Greater comfort-level </li></ul></ul><ul><ul><li>Greater buy-in </li></ul></ul>
    5. 5. World of (Too) Many Choices <ul><li>WYSIWYG EDITORS </li></ul><ul><li>FCKeditor, CKeditor, TinyMCE, jWYSIWYG, markItUp, NicEdit, openWYSIWYG, Whizzywig, WYMeditor 0.5, YUI editor </li></ul><ul><li>WYSIWYG INTEGRATION MODULES </li></ul><ul><li>Wysiwyg, FCKeditor, CKeditor </li></ul><ul><li>EXTRAS </li></ul><ul><li>IMCE, Image Assist, ImageBrowser </li></ul>
    6. 6. Time out, Time out The Input Filter!!! <ul><li>(from the FCKeditor README.txt ) </li></ul><ul><li>Either grant those users Full HTML access or use the following: </li></ul><ul><li><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> </li></ul><ul><li>Let us reflect... </li></ul><ul><li>Function: to format & protect </li></ul><ul><li>Out of the box comes in two varieties*: </li></ul><ul><ul><li>Filtered HTML </li></ul></ul><ul><ul><li>Full HTML </li></ul></ul><ul><li>      *not counting php </li></ul>
    7. 7. WYSIWYG Editors <ul><li>General Considerations: </li></ul><ul><ul><li>Speed (loading, working) </li></ul></ul><ul><ul><li>Browser compatibility </li></ul></ul><ul><ul><li>Pasted content from MS Word </li></ul></ul><ul><ul><li>Valid html? </li></ul></ul><ul><li>  </li></ul><ul><li>Implementation Considerations: </li></ul><ul><ul><li>Which tags/buttons to allow? </li></ul></ul><ul><ul><li>Theme friendly? </li></ul></ul><ul><li>  </li></ul><ul><li>Examples: </li></ul><ul><ul><li>CKeditor (formerly 'FCKeditor') - </li></ul></ul><ul><ul><li>TinyMCE - </li></ul></ul>
    8. 8. WYSIWYG Integration Modules <ul><li>Helper Application or Go-between </li></ul><ul><li>  </li></ul><ul><li>Old School : Individual integration module for each editor         (eg. TinyMCE module, FCKeditor module, etc.) </li></ul><ul><li>New School : One integration module for all!         (eg. Wysiwyg Module) </li></ul><ul><li>         </li></ul><ul><li>Advantages of integrated approach: </li></ul><ul><ul><li>Need to install only editor </li></ul></ul><ul><ul><li>Integrate multiple editors </li></ul></ul><ul><ul><li>Provides consistent interface (i.e. API) for other modules to add their own plugins/buttons </li></ul></ul>
    9. 9. Extras <ul><li>Add-on Image & File Managers: </li></ul><ul><ul><li>IMCE (image) - </li></ul></ul><ul><ul><li>ImageBrowser (image) ( demo ) - </li></ul></ul><ul><ul><li>Image Assist (image) - </li></ul></ul><ul><ul><li>WebFM module (file) - </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Better Formats (input formats) - </li></ul></ul>
    10. 10. <ul><li>Resources </li></ul><ul><li>  </li></ul><ul><li>WYSIWYG Module WYSIWYG Drupal Group Handbook page on Editors </li></ul><ul><li>  </li></ul><ul><li>Thank You </li></ul><ul><li>Leo Robert Klein </li></ul><ul><li>leo 'at' leoklein 'dot' com </li></ul><ul><li> (website) </li></ul><ul><li> (blog) </li></ul>