27 - May - 2009

A WYSIWYG Solution for Drupal 6

Post by Mike C
Ixis Service

Making content easy to edit with in a content management system usually involves the inclusion of a drop in JavaScript based Rich Text Editor. There's plenty of them around such as TinyMCE, FCKEditor, YUI Editor, to name but a few. Drupal has support for nearly all editors which are made available, but the level of integration varies greatly amongst the contributed modules.

With the arrival of Drupal 6 the WYSIWYG API module was born, with the task of unifying the configuration and integration of 3rd party JavaScript editors, and making it easy to get them installed on the server.

The current state of WYSIWYG editors for Drupal 6 leaves much to be desired. Installations often resulting in numerous cryptic JavaScript errors in the browser, and not a quick and simple installation task. Work is being poured in to projects such as the WYSIWYG API, and if you have the skill and time to contribute back to the squashing of bugs it's always appreciated.

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.

Both TinyMCE and FCKEditor integrate well with the Drupal IMCE image management module. However TinyMCE v3.x coupled with the WYSIWYG API doesn't work with IMCE due to numerous JavaScript errors (as of this article date). So we've opted for FCKEditor with its built in image insert dialog.

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".

Conclusion

So our current working recipe for WYSIWYG in Drupal 6 consists of:

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.

Mike C

Managing Director

12 years of Drupal development wrangling and a background in digital project architecture.

Comments

Image picker is a great module for image placement, I am having trouble with grouping lightbox images, rel=lightbox[group] should happen automatically but I am using the d6 dev imagepicker module. Supports float left/right, resize and user image folders like u1 u2 etc.

Marcus

"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."

if anyone can explain the meaning & implications of this statement, pls do so

Visitor

It means that the YUI Editor stores any files uploaded in the root files/ directory of Drupal. So there is no way to organise image uploads to be stored in a sub folder to help keep things tidy in a busy Drupal site.

Al1976

In reply to by Visitor

It seems I'm stuck at IMCE.... I installed it and can upload images from my account but FCKeditor Inser Image button does not seem to have an option to pick images to insert. I have to enter the url of the images manually.

Hope you can guide me on where the problem might be.

tks,

Kevin C.

Kevin Carbonaro

Hey Kevin - sounds like you simply need to edit the FCKEditor WYSIWYG profile and enable the additional IMCE button/plugin, along with the normal insert image button.
IMCE is at the end of the list of available buttons.

Mike C

In reply to by Kevin Carbonaro

Mike,

Thanks for your reply. I had somehow managed - It seems that I had some modules installed incorrectly, and yes, did find out that I had to go through the profile of fckeditor to finally make it all work.

tks,

Kevin

Kevin Carbonaro

i have installed the imagepicker module for drupal 6.2x, I have installed drupal 6.14 however once installed and I go to edit the page to insert the picture it is showing me a blank area under the imagepicker tab and I am getting the following error -

* warning: Parameter 1 to theme_imagepicker() expected to be a reference, value given in C:\xampp\htdocs\drupal-6.14\includes\theme.inc on line 617.
* warning: Parameter 1 to theme_imagepicker() expected to be a reference, value given in C:\xampp\htdocs\drupal-6.14\includes\theme.inc on line 617.

Can anyone help me please.

Visitor

i have installed the imagepicker module for drupal 6.2x, I have installed drupal 6.14 however once installed and I go to edit the page to insert the picture it is showing me a blank area under the imagepicker tab and I am getting the following error -

* warning: Parameter 1 to theme_imagepicker() expected to be a reference, value given in C:\xampp\htdocs\drupal-6.14\includes\theme.inc on line 617.
* warning: Parameter 1 to theme_imagepicker() expected to be a reference, value given in C:\xampp\htdocs\drupal-6.14\includes\theme.inc on line 617.

Can anyone help me please.

Visitor

I have the same issue
\drupal-6.14\includes\theme.inc on line 617.

Visitor

Hi - great post and I want to follow this approach with my sites...just one problem - FCKEditor seems to be dropping images in as tags rather than tags - any idea why this might be??...

DanW

In Drupal 6, to use lightbox, you don't necessarily need to add in a 'rel' attribute. You can instead define a class which will trigger lightbox, and this is set in the Lightbox control panel. If you're using a wysiwyg like ckeditor, you can then enter in this class when you double-click on an image to adjust its properties.

in Lightbox's Admin

* Select the "Automatic image handling" tab
* Click "Automatic handler for custom class images"
* Set the drop-down to "Lightbox"
* Enter in the "Custom image trigger classes", the class name: popup
Then in the FCKeditor, use IMCE to insert a thumbnail, and in the image properties:

* Select the Advanced tab
* In the "Stylesheet Classes" field, enter the class name: popup (must match that entered above)
* Text entered into the Image Info tab, "Alternative Text" field, will appear as the Lightbox popup caption.

Finally, in the FCKeditor, select the image and:

* Click the Insert/Edit link icon
* Browse and select the full-size image

Visitor

Add new comment

Share this article

Sign up to our newsletter!

Our thoughts

Let's work together

Get in touch and find out how we can empower your organisation.
Back to top