For the majority of our clients they need to achieve a number of key tasks with the WYSIWYG solution:
- Edit text, including simple styling: bold, italic, alignment
- Select various heading sizes / styles
- Insert images inline with text
- Lightbox integration to display larger versions of images
The uploading and inserting of image assets is where WYSIWYG integration gets a little flaky and messy. The YUI Editor has everything built in, but provides no control over where the image files are stored in your Drupal site, they are simply dropped in to the defined 'files/' directory.
Once we have the image uploaded to a pre-defined directory on the server, the user can insert it in to their content easily. What if a user wants to resize their image to a thumbnail? We avoid using IMCE's image resizing & thumbnail support as it depends on pre-defined sizes. The excellent Image Resize Filter provides a very slick alternative that integrates with any WYSIWYG editor. It allows the content editor to resize their large image using the WYSIWYG. Upon saving the content, a resized version is created, whilst retaining the original large source version of the file for future resizing. A great demo explaining the capabilities can be seen over at Lullabot.
The final requirement was to support displaying a larger version of an inserted image inside a lightbox. This usually means adding a rel="lightbox" attribute to the anchor tag wrapped around the thumb image. FCKEditor's link dialog doesn't provide any support for setting the 'rel' attribute. Thankfully an option in the Image Resize Filter module provides an automated system for adding in a pre-defined 'rel' attribute of your choosing, in this case we automatically wrap our smaller image with an anchor tag and set rel="lightbox".
So our current working recipe for WYSIWYG in Drupal 6 consists of:
- WYSIWYG API with FCKEditor.
- IMCE for image management.
- Lightbox2 to handle the popup larger images.
- Image Resize Filter for thumbnails and lightbox support.
Putting together the above modules will allow your content editor(s) a smooth process when editing text, uploading and inserting images, and removes further barriers of required HTML attribute knowledge for users.