wysi (not always) wyg (but it can be) - drupalcon denver 2012
DESCRIPTION
Configuring WYSIWYG editors and image handling is a laborious process, riddled with caveats and best practices. The number of contributed modules extending the WYSIWYG experience is vast, and their configuration can be a quagmire. Likely you're already part of the way with your configuration. This aims to supercharge your approach What we'll cover: - How to consider input format creation. - How (and why) to configure better_formats and wysiwyg_filter. - Inline image options and why you might choose one method over another (IMCE vs insert). - Helper modules and configurations for image handling (filefield_paths, filefield_sources, pathauto , transliteration, insert, image_resize_filter, imce). - Building Features of your configurations, and also pushing configuration into profiles - D6 and D7, but mostly 7. session: http://denver2012.drupal.org/program/sessions/what-you-see-not-always-what-you-get-it-can-be.html video: https://archive.org/details/WhatYouSeeIsnotAlwaysWhatYouGetbutItCanBe google doc wtih the goods http://bit.ly/d7wysiwygTRANSCRIPT
WYSI(not always)
WYG(but it can be)
Andrew Mallis
ideograph
Site Building
d.o./twitter: Andrew_Mallis
ideograph
‣ context
‣ modules!
‣ arm you with concepts
‣ demo site!
‣ the distro
OUTLINE
whatchu want?
whatchu get
the solution…
LOTS OF MODULES!
text-input
‣ wysiwyg – the api that enables 3rd party editors
‣ wysiwyg_"lter – input !lter that gives us control over HTML output (think: output !lter)
‣ better_formats – de!ne input formats per content type (mostly in D7 core now) and more
Media!‣ wysiwyg – the api that enables 3rd party editors‣ "le"eld_sources – re-use existing !les, upload via URL‣ insert – adds a button to insert images or !le links into
text!elds from image/!le !elds‣ image_resize_"lter – creates on-the-#y image-style/
imagecache derivatives when inline images are resized‣ imce + imce_wysiwyg – con!gurable image/!le
uploader and browser that supports personal & shared directories and quotas
‣ imagecache [6.x] – create derivative images from a single !le for presentation in different contexts
‣ itweak_upload [6.x] – beauti!es !le upload forms
Paths / SEO‣ pathauto – automatically generates path aliases according to
con!gurable patterns
‣ transliteration – rename !les on upload to use only US-ASCII characters
‣ "le"eld_paths – use node tokens in destination paths and !lenames
‣ pathologic – input !lter that makes image links in content areas relative (most useful for feeds)
TEXT (INPUT) FORMATS‣ create 2 new text formats
‣ text editor
‣ advanced text editor
WYSIWYG FILTER
@[class|style|title],a[href|target<_blank|name|rel], -div[align<center?justify?left?right],#p[align<center?justify?left?right],strong/b,em/i,u,-ol[type|compact],-ul[type|compact],-li,-dl,-dt,-dd,caption,-h2,-h3,-h4,-h5,-h6,hr[size|noshade],br,cite,code,-blockquote,img[src|width|height|align|hspace|vspace], -span[align<center?justify?left?right]
text editor
ADVANCED RULES
‣ sane block formats
‣ drop-down select “styles”(coordinate with wysiwyg pro"le)
‣ container to "x #oat bugs
WYSIWYG pro"les
‣ Tame the CSS in the editor
‣ Custom module to add classes to CKEditor <body>
why ckeditor?
‣ not too scary looking
‣ accessibility
‣ force clean-up on paste
‣ “easy” inclusion of custom styles
‣ everyone else is doing it
wysiwyg.css
body.cke_show_borders,body.mceContentBody {
/* reset font size or it will cascade */font-size: 1em;
/* just in case the theme sets a background on the body tag */
background: none #FFF;
/* add a bit of spacing so we aren't right to the editor’s edge */ margin: 10px;
}
ckeditor-con"g.js
CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; config.bodyClass = 'node';}
MEDIA!
Media.module is the future,but we live in the present…
2. images‣ FIELDS
‣ INLINE IMAGES
1. attachments
"le management
‣ strategize!
‣ sanitize uploads with transliteration and "le"eld_paths
‣ structure where uploads go with "le"eld_sources
‣ "le browsing (only) with imce
the distro
‣ .make "le
‣ simple pro"le
‣ bartik subtheme
‣ custom module
‣ features: articles, view, utility (permissions, con!g)
https://github.com/ideograph/ideograph_wysiwyg-build
$ drush make ideograph_wysiwyw.make ideograph.wysiwyw
$ cd ideograph.wysiwyw
1. build it
$ drush site-install ideograph_wysiwyw \ --site-name='WYSIWYG tests' \ --db-url=mysql://dbuser:dbpassword@localhost/database_name \ --db-su=dbuser --db-su-pw=dbpassword \ --account-name=root --account-pass=u1pass \ [email protected]
‣ via UI by selecting the “ideograph wysiwyg” pro"le
‣ or, with drush:
2. install it
roll your own!
questions
?
What did you think?Locate this session on theDrupalCon Denver website
http://denver2012.drupal.org/program
Click the “Take the Survey” link.
Thank You!