WYSI not always WYG Session at Drupalcon

| Live Blog Posts

This is a live blog of "What You See Is (Not Always) What You Get (but it can be)" by Andrew Mallis.

One of the most asked questions we get in our Drupal training from those coming from WordPress or Joomla is "Where is the WYSIWYG editor?". This is one of Drupal's shortcomings for content editors and beginning site builders. It's high on the planned list of things to fix in Drupal 8.

Until that arrives, in another 18 months time, Andrew demonstrated a solid option for creating WYSIWYG capabilities in Drupal.

http://bit.ly/ideograph-wysiwyg is the key document to use if you want to try his recommended solution.

wysiwyg session

Here are the Modules You'll Need

Text Input

  • WYSIWYG (this acts as the API)
  • wysiwyg_filter
  • better_formats

Media

  • filefield_sources
  • image_resize_filter
  • IMCE + imce_wysiwyg

Paths

  • pathauto
  • tranliteration
  • filefield_paths
  • pathologic

Here are the Steps to Follow

  1. Create 2 new text formats - text editor and advanced text editor
  2. Create the WYSIWYG filter
  3. Setup advanced rules (this makes SO much sense)
    • sane block formats
    • drop-down select "styles"
    • container to fix bugs
  4. Tame the CSS in the editor
  5. Use a custom module to add classes to CKEditor
  6. Why ckeditor?
    • not to oscary
    • accessibility
    • some great features
  7. grab the ckeditor-config.js (will be in the downloadable notes - see link a the end of this post

The Media Module

The media.module is the future but we live in the present. Currently there are two different categories:

  1. attachments and embedded images
  2. fields and inline images.

 

We need to strategize our file management. Sub-folders are needed for images.

There could be a structure where uploads go with filefield_sources, then you go IMCE to browse.

Demo Time

Couple of cool things from the demo...

  • The image_filter api will dynamically resize images and save them. So, even if you upload a big image and resize it in the editor, it will be saved at the new size.
  • Configuration is somewhat simple but requires some patience and reading (the documentation covers everything).

Honestly, this is STILL not as easy as WordPress or Joomla, even with the solution laid out in this session. Drupal's WYSIWYG editorial ability falls far short of other CMS's out there. If Monday's keynote from Dries is any indication, we should see some significant improvement by Drupal 8, but that is still 18 months away. That said, this is probably the most elegant Drupal solution I've seen. If this is something you want to try, head over to http://bit.ly/ideograph-wysiwyg for the docs.

There is a distro - see the docs for more details.


About the author

Rod holds two masters degrees and has been training people how to do "things" for over 25 years. Originally from Australia, he grew up in Canada and now resides just outside Cincinnati, Ohio.