Best Practices WYSIWYG (with inline image handling) @jenlampton | - - PowerPoint PPT Presentation

(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