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 co...
What You See Is What You
Get
• Users can see
something closer to the
final product instead of
HTML
• Buttons and other
fea...
Drupal
• Wordpress has a native WYSIWYG, Drupal does not
• Many different types of WYSIWYG editors and modules to
chose fr...
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: title
Field: Url + Field...
Stages
Input Format
• Valuable opportunity to tailor editor to user
needs
• Plain HTML for admin, lots of buttons for
content edi...
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 thin...
Image Handling
• Do you use built-in image upload?
• Insert module/CCK Field might be a better
option
– No code editing to...
Filters
• Do your options match up for what’s allowed?
• For example: image button, when <img> tag is
not allowed by filter
Wywiwyg and Drupal
Wywiwyg and Drupal
Wywiwyg and Drupal
Upcoming SlideShare
Loading in …5
×

Wywiwyg and Drupal

685 views
627 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
685
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Wywiwyg and Drupal

  1. 1. WYWIWYG Melissa McEwen Twitter/Drupal: Melissamcewen
  2. 2. The Need • So-called “normal” people don’t like dealing with code • Need a graphical interface for creating and editing content
  3. 3. 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.
  4. 4. Drupal • Wordpress has a native WYSIWYG, Drupal does not • Many different types of WYSIWYG editors and modules to chose from
  5. 5. WTFIWYG • WYWIWYG modules in general often frustrate users because they lie – Filters – Stupid evil copy and pasting
  6. 6. Fun with Users: Pasting from MS Word
  7. 7. NOOOOOOOO WHYYYYY???!!WHYYYYY???!!
  8. 8. GIANT IMAGE OF DOOM MY PAGE LOAD TIME IS SOOOOOOO HIGH! WHY?
  9. 9. Do You Need This? • CCK/Views/CSS solution available • Create content types • Style fields Field: title Field: Url + Field: Link title Field: image + imagecache resize CSS
  10. 10. Stages
  11. 11. 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
  12. 12. Popular Editors • CKEditor • FCKeditor • TinyMCE • YUI • All of them have some issues
  13. 13. 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
  14. 14. 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
  15. 15. Filters • Do your options match up for what’s allowed? • For example: image button, when <img> tag is not allowed by filter

×