SlideShare a Scribd company logo
1 of 18
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: title
Field: Url + Field: Link title
Field: image + imagecache resize
CSS
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
Wywiwyg and Drupal
Wywiwyg and Drupal
Wywiwyg and Drupal

More Related Content

What's hot

Preventing Drupal Headaches: Content Type Checklist
Preventing Drupal Headaches: Content Type ChecklistPreventing Drupal Headaches: Content Type Checklist
Preventing Drupal Headaches: Content Type Checklist
Acquia
 
Responsive Web Design with Bootstrap
Responsive Web Design with BootstrapResponsive Web Design with Bootstrap
Responsive Web Design with Bootstrap
Jason Stehle
 

What's hot (20)

WordPress - fixing sites with problems
WordPress - fixing sites with problemsWordPress - fixing sites with problems
WordPress - fixing sites with problems
 
Drupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs PanelsDrupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs Panels
 
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
AD105 - OneUI.. really? Is that because you don't know about Twitter Bootstrap?
 
Edy Dawson Notes on SF HTML5 Dev Conf
Edy Dawson Notes on SF HTML5 Dev ConfEdy Dawson Notes on SF HTML5 Dev Conf
Edy Dawson Notes on SF HTML5 Dev Conf
 
WP 101 - WordPress Basics
WP 101 - WordPress BasicsWP 101 - WordPress Basics
WP 101 - WordPress Basics
 
RWD - Bootstrap
RWD - BootstrapRWD - Bootstrap
RWD - Bootstrap
 
Preventing Drupal Headaches: Content Type Checklist
Preventing Drupal Headaches: Content Type ChecklistPreventing Drupal Headaches: Content Type Checklist
Preventing Drupal Headaches: Content Type Checklist
 
Should You Wordpress?
Should You Wordpress?Should You Wordpress?
Should You Wordpress?
 
Going visual: Building the library website with the Divi theme
Going visual: Building the library website with the Divi themeGoing visual: Building the library website with the Divi theme
Going visual: Building the library website with the Divi theme
 
The Highs & Lows of Jetpack
The Highs & Lows of JetpackThe Highs & Lows of Jetpack
The Highs & Lows of Jetpack
 
What Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPressWhat Developers Need Designers to Know about WordPress
What Developers Need Designers to Know about WordPress
 
WP 101 - Custom Fields & Post Types
WP 101 - Custom Fields & Post TypesWP 101 - Custom Fields & Post Types
WP 101 - Custom Fields & Post Types
 
Simplifying End-user Drupal 7 Content Administration
Simplifying End-user Drupal 7 Content Administration Simplifying End-user Drupal 7 Content Administration
Simplifying End-user Drupal 7 Content Administration
 
Bootstrap 3 + responsive
Bootstrap 3 + responsiveBootstrap 3 + responsive
Bootstrap 3 + responsive
 
WP101 - Themes and Plugins
WP101 - Themes and PluginsWP101 - Themes and Plugins
WP101 - Themes and Plugins
 
Word press
Word pressWord press
Word press
 
45 WordPress Interview Questions
45 WordPress Interview Questions45 WordPress Interview Questions
45 WordPress Interview Questions
 
Responsive Web Design with Bootstrap
Responsive Web Design with BootstrapResponsive Web Design with Bootstrap
Responsive Web Design with Bootstrap
 
Web Design Primer Sample - HTML CSS JS
Web Design Primer Sample - HTML CSS JSWeb Design Primer Sample - HTML CSS JS
Web Design Primer Sample - HTML CSS JS
 
Node.js 101
 Node.js 101 Node.js 101
Node.js 101
 

Viewers also liked

BrainBank Idealink Open
BrainBank Idealink OpenBrainBank Idealink Open
BrainBank Idealink Open
brainbankinc
 
κελυφη παραδειγματα μικρης κλιμακας
κελυφη παραδειγματα μικρης κλιμακαςκελυφη παραδειγματα μικρης κλιμακας
κελυφη παραδειγματα μικρης κλιμακας
IreneJohnLora
 
Đỗ yến
Đỗ yếnĐỗ yến
Đỗ yến
Le Hung
 
Case Study
Case StudyCase Study
Case Study
Prezen
 
Colorpresentation
ColorpresentationColorpresentation
Colorpresentation
ml26441
 
Đỗ Thị Yến by Lê Văn Hùng
Đỗ Thị Yến by Lê Văn HùngĐỗ Thị Yến by Lê Văn Hùng
Đỗ Thị Yến by Lê Văn Hùng
Le Hung
 
Group project pwrpt
Group project pwrptGroup project pwrpt
Group project pwrpt
ml26441
 

Viewers also liked (20)

First Preston social talk
First Preston social talkFirst Preston social talk
First Preston social talk
 
BrainBank Idealink Open
BrainBank Idealink OpenBrainBank Idealink Open
BrainBank Idealink Open
 
υλικά
υλικάυλικά
υλικά
 
Computers
ComputersComputers
Computers
 
κελυφη παραδειγματα μικρης κλιμακας
κελυφη παραδειγματα μικρης κλιμακαςκελυφη παραδειγματα μικρης κλιμακας
κελυφη παραδειγματα μικρης κλιμακας
 
Đỗ yến
Đỗ yếnĐỗ yến
Đỗ yến
 
Upcyclist infographic
Upcyclist infographicUpcyclist infographic
Upcyclist infographic
 
Case Study
Case StudyCase Study
Case Study
 
Belasi
BelasiBelasi
Belasi
 
WESO MeTTeG 2011
WESO MeTTeG 2011WESO MeTTeG 2011
WESO MeTTeG 2011
 
Colorpresentation
ColorpresentationColorpresentation
Colorpresentation
 
Đỗ Thị Yến by Lê Văn Hùng
Đỗ Thị Yến by Lê Văn HùngĐỗ Thị Yến by Lê Văn Hùng
Đỗ Thị Yến by Lê Văn Hùng
 
Group project pwrpt
Group project pwrptGroup project pwrpt
Group project pwrpt
 
How to create a youtube account
How to create a youtube accountHow to create a youtube account
How to create a youtube account
 
Produktová prezentace - TiCtOG
Produktová prezentace - TiCtOGProduktová prezentace - TiCtOG
Produktová prezentace - TiCtOG
 
Your 2011 Marketing Plan
Your 2011 Marketing PlanYour 2011 Marketing Plan
Your 2011 Marketing Plan
 
Neis supernørd
Neis supernørdNeis supernørd
Neis supernørd
 
Mj slide kuakon
Mj slide kuakonMj slide kuakon
Mj slide kuakon
 
How to brand and sell online
How to brand and sell onlineHow to brand and sell online
How to brand and sell online
 
Bon jovi
Bon joviBon jovi
Bon jovi
 

Similar to Wywiwyg and Drupal

Similar to Wywiwyg and Drupal (20)

Top modules
Top modulesTop modules
Top modules
 
Can WordPress help make the web more accessible - eaccess15 - Feb 2015
Can WordPress help make the web more accessible - eaccess15 - Feb 2015Can WordPress help make the web more accessible - eaccess15 - Feb 2015
Can WordPress help make the web more accessible - eaccess15 - Feb 2015
 
Wordpress intro
Wordpress introWordpress intro
Wordpress intro
 
Business 2.0 with WordPress
Business 2.0 with WordPressBusiness 2.0 with WordPress
Business 2.0 with WordPress
 
BITM3730 11-8.pptx
BITM3730 11-8.pptxBITM3730 11-8.pptx
BITM3730 11-8.pptx
 
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011
 
Introduction to Drupal
Introduction to DrupalIntroduction to Drupal
Introduction to Drupal
 
BITM3730 11-7.pptx
BITM3730 11-7.pptxBITM3730 11-7.pptx
BITM3730 11-7.pptx
 
An Introduction to MIT's Drupal Cloud
An Introduction to MIT's Drupal CloudAn Introduction to MIT's Drupal Cloud
An Introduction to MIT's Drupal Cloud
 
WordPress Themes and Plugins
WordPress Themes and PluginsWordPress Themes and Plugins
WordPress Themes and Plugins
 
Adobe Dreamweaver CS5 Basics
Adobe Dreamweaver CS5 BasicsAdobe Dreamweaver CS5 Basics
Adobe Dreamweaver CS5 Basics
 
WordPress & Other Content Management Systems
WordPress & Other Content Management SystemsWordPress & Other Content Management Systems
WordPress & Other Content Management Systems
 
WordPress Plugins to add style to your website
WordPress Plugins to add style to your websiteWordPress Plugins to add style to your website
WordPress Plugins to add style to your website
 
Visual Design for Content Management Systems
Visual Design for Content Management SystemsVisual Design for Content Management Systems
Visual Design for Content Management Systems
 
So What is This Thing Called WordPress?
So What is This Thing Called WordPress?So What is This Thing Called WordPress?
So What is This Thing Called WordPress?
 
Getting Started with Drupal
Getting Started with DrupalGetting Started with Drupal
Getting Started with Drupal
 
Coonti in HelsinkiJS
Coonti in HelsinkiJSCoonti in HelsinkiJS
Coonti in HelsinkiJS
 
Using Features
Using FeaturesUsing Features
Using Features
 
Modular PHP Development using CodeIgniter Bonfire
Modular PHP Development using CodeIgniter BonfireModular PHP Development using CodeIgniter Bonfire
Modular PHP Development using CodeIgniter Bonfire
 
WordPress.pptx
WordPress.pptxWordPress.pptx
WordPress.pptx
 

Recently uploaded

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 

Wywiwyg and Drupal

  • 2. The Need • So-called “normal” people don’t like dealing with code • Need a graphical interface for creating and editing content
  • 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. Drupal • Wordpress has a native WYSIWYG, Drupal does not • Many different types of WYSIWYG editors and modules to chose from
  • 5. WTFIWYG • WYWIWYG modules in general often frustrate users because they lie – Filters – Stupid evil copy and pasting
  • 6. Fun with Users: Pasting from MS Word
  • 8. GIANT IMAGE OF DOOM MY PAGE LOAD TIME IS SOOOOOOO HIGH! WHY?
  • 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
  • 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. Popular Editors • CKEditor • FCKeditor • TinyMCE • YUI • All of them have some issues
  • 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. 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. Filters • Do your options match up for what’s allowed? • For example: image button, when <img> tag is not allowed by filter