WYWIWYG

Melissa McEwen Twitter/Drupal: Melissamcewen

The Need

• So-called “normal” people don’t like dealing with code

• Need a graphical interface for creating and editing content

What You See Is What You Get

• Users can see something closer to the final product instead of HTML

• Buttons and other features to help format text, add images, links to urls, etc.

Drupal

• Wordpress has a native WYSIWYG, Drupal does not• Many different types of WYSIWYG editors and modules to

chose from

WTFIWYG

• WYWIWYG modules in general often frustrate users because they lie– Filters– Stupid evil copy and

pasting

Fun with Users: Pasting from MS Word

NOOOOOOOO

WHYYYYY???!!WHYYYYY???!!

GIANT IMAGE OF DOOM

MY PAGE LOAD TIME IS SOOOOOOO HIGH! WHY?

Do You Need This?• CCK/Views/CSS solution available• Create content types• Style fields

Field: titleField: Url + Field: Link titleField: image + imagecache resizeCSS

Stages

Input Format

• Valuable opportunity to tailor editor to user needs

• Plain HTML for admin, lots of buttons for content editors (images, bullet points) , a few (bold, link, etc.) for anon comments

• http://drupal.org/project/better_formats

Popular Editors

• CKEditor• FCKeditor• TinyMCE• YUI• All of them have

some issues

Two Options

Individual modules• CKEditor, FCKeditor• Often has more options for

customization • Often have annoying things,

like CKEditor assumes you want it for every text field unless you exclude it

WYSIWYG API• Flexible- switch to a different

editor easily• Growing number of options

that are very useful like strip out crap on paste, choosing buttons without editor code

• The future! Standardization for other module integration!

• Libraries API: Keep stupid non-Drupal code out of your /modules directory

http://drupal.org/node/831478

Image Handling

• Do you use built-in image upload?• Insert module/CCK Field might be a better

option– No code editing to enable– Probably more secure– Imagecache integration

• Resize filter, save your bandwidth• IMCE or Imagebrowser

http://groups.drupal.org/node/49658

Filters

• Do your options match up for what’s allowed?• For example: image button, when <img> tag is

not allowed by filter