Drupal WYSIWYG - not always

Andrew Mallis
Pricipal, Ideograph
http://ideograph.biz

http://bit.ly/ideograph-wysiwyg

text-input related modules:

wysiwyg  – the api that enables 3rd party editors

wysiwyg_filter – text format (input filter in D6) that gives us control over HTML output (think: output filter)
better_formats – define text/input formats per content type (mostly in D7 core now)

 

File/image handling:

filefield_sources – re-use existing files, upload via URL
insert – adds a button to insert images or file links into textfields from image/file fields
image_resize_filter – creates on-the-fly image-style/imagecache derivatives when inline images are resized
imce – configurable image/file uploader and browser that supports personal & shared directories and quotas
imce_wysiwyg – bridges imce and wysiwyg editors
imagecache [6.x] – create derivative images from a single file for presentation in different contexts
itweak_upload [6.x] – beautifies file upload forms; mostly rolled into D7.

SEO/paths:

pathauto – automatically generates path aliases according to configurable patterns
transliteration – rename files on upload to use only US-ASCII characters
pathologic – input filter that makes image links in content areas relative
filefield_paths –  use node tokens in destination paths and filenames

Features:

features
ctools
strongarm
exportables [6.x] – 6.x-2.0-beta1 or later is required
input_formats [6.x] – export input formats in D6
diff – see how a feature is overridden

First thing you want to do is two create two text formats

  • Text editor
  • Advanced Text editor

Here is what we use instead for our simple text_editor input format:
@[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]

And here is what we'll use for the more permissive advanced_text_editor:
@[class|style|title],
a[!href|target<_blank|name|rel|id],
-div[align<center?justify?left?right],
#p[align<center?justify?left?right],
strong/b,em/i,u,-sup,-sub,
-ol[type|compact],-ul[type|compact],-li,-dl,-dt,-dd,
caption,-code,-pre,address,-h1,-h2,-h3,-h4,-h5,-h6,hr[size|noshade],
br,cite,code,-blockquote,cite,abbr,acronym,legend,
img[src|width|height|align|hspace|vspace],
-table[border=0|cellspacing|cellpadding|width|frame|rules|height|align|summary|bgcolor|background|bordercolor],
-tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],
tbody,thead,tfoot,#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],
#th[colspan|rowspan|width|height|align|valign|scope],
-span[align<center?justify?left?right]If you really need to allow font selection, resizing, coloring, (yuck!) add:
-font[face|size|color]
however, classes are way to go.

If you absolutely need to allow IDs, replace the first line with

@[id|class|style|title]

If you want to disallow inline images, remove:
img[src|width|height|align|hspace|vspace]

 

ckeditor - you can check force cleanup, which will remove all the microsoft junk.

Image handling

Media module doesn't allow me to control where the images are going...

  • Attached images
  • Fields
  • Inline images

Never put your images into the root web directory, sanitize uploaded filenames with transliteration and filefield paths.

Use filefieid_path to control structure of uploaded files.