Best Practices WYSIWYG

(with inline image handling)

@jenlampton | http://www.jenlampton.com

22 August 2012

Best Practices WYSIWYG

Wednesday, August 22, 2012

I AM @jenlampton

I have been using Drupal since D4.7

I build Drupal sites for other people

I consider myself a developer

Wednesday, August 22, 2012

I AM @jenlampton

I have been using Drupal since D4.7

I build Drupal sites for other people

I consider myself a developer

I HATE WYSIWYG EDITORS

Wednesday, August 22, 2012

THERE’S A LOT TO COVER

•Drupal’s Text Formats (Filtered HTML, Full HTML, etc)•Drupal’s Filters - PHP (line break, link, etc)•WYSIWYG editors - JS (TinyMCE, CKEditor, etc)•A whole lot of configurations

Wednesday, August 22, 2012

CONTRIB MODULES

•WYSIWYG API (http://drupal.org/project/wysiwyg)•Better Formats (http://drupal.org/project/better_formats)•IMCE (http://drupal.org/project/imce)•IMCE Wysiwyg API Bridge (http://drupal.org/project/imce_wysiwyg)•Insert (http://drupal.org/project/insert)•Caption Filter (http://drupal.org/project/caption_filter)

Wednesday, August 22, 2012

IF THERE’S TIME•Image Resize Filter (http://drupal.org/project/image_resize_filter)•Filefield Sources (http://drupal.org/project/filefield_sources)•WYSIWYG filter (http://drupal.org/project/wysiwyg_filter)

•WYSIWYG fields (http://drupal.org/project/wysiwyg_fields)•EPSA Crop (http://drupal.org/project/epsacrop)•Other awesome WYSIWYG modules•Media (http://drupal.org/project/media)*•ALOHA (http://drupal.org/project/aloha)**

NOT COVERED

Wednesday, August 22, 2012

DEMO (MY CODE)

•Drupal 7 (the same principles apply to Drupal 6, but probably not to Drupal 8)*•Admin Menu module (http://drupal.org/project/admin_menu)•Custom sub-theme of Bartik (adds a style sheet: https://github.com/jenlampton/wysiwyg_theme)

Wednesday, August 22, 2012

DEMO (MY CONFIG)

•A new role called ‘editor’•A new user called ‘editor’ in the editor role•Permissions set accordingly for editors

Users

Content

•Added an ‘inline images’ field to the Page type (field set to ‘hidden’ under display settings)•New content type ‘Icon‘ (inline images field aded, upload destination set to images/icons)

Wednesday, August 22, 2012

LET’S GO!

Wednesday, August 22, 2012

@jenlampton | http://www.jenlampton.com

BEST PRACTICES WYSIWYG

http://bit.ly/RbedXc

Wednesday, August 22, 2012

photo credits:

DrupalCon Munich Slide Deck:http://munich2012.drupal.org/speakers/speaker-resources

Angry face:http://www.last.fm/group/I+hate+shared+scrobblings+and+profles+of+artists

Wednesday, August 22, 2012