WYSIWYG: how to setup a visual html formatting interface
123
Sign In How to set up a WYSIWYG editor: the modules that make it easy vs the modules that make it awesome. Get it done right the first time!
WYSIWYG API (http://drupal.org/project/wysiwyg)
Better Formats (http://drupal.org/project/better_formats)
Filefield Insert (http://drupal.org/project/filefield_insert)
Image Resize Filter (http://drupal.org/project/image_resize_filter)
Presentation Takeaway:
This step by step demonstration will explain how to set up a WYSIWYG editor and supports image uploads and instant resizing using filefield (imagefield) and imagecache.
Full list of modules used for presentation
http://drupal.org/project/admin_menu
http://drupal.org/project/better_formats
http://drupal.org/project/cck
http://drupal.org/project/filefield
http://drupal.org/project/filefield_insert
http://drupal.org/project/filefield_sources
http://drupal.org/project/image_resize_filter
http://drupal.org/project/imageapi
http://drupal.org/project/imagecache
http://drupal.org/project/imagefield
http://drupal.org/project/wysiwyg
http://tinymce.moxiecode.com/download.php
DEMO SCRIPT:
Add new role for user group that will use the WYSIWYG, for example ‘editor’
View permissions and enable new role to add and edit the page content type.
Create new user to test the role and permissions.
Switch browser and authenticate as that user.
Create page
Enable modules
View WYSIWYG
Review options, download TinyMCE
Refresh WYSIWYG
Enable Buttons / interface options
View wysiwyg.css
Add css
Save tiny config
Set Defaults, move Editor role to top for roles
Flip to editor, edit page review new options
INLINE IMAGES
image cache horizontal 180 tall, vertical 200 wide
add file field, edit settings
flip to editor, add images inline.
- Login to post comments
Comments
Some Advanced WYSIWYG features
It’s definitely a good idea to restrict what admins can do with Rich Text editors so that they can’t corrupt the design style of the website, but sometimes your client needs some extra control which may require an additional module to the ones mentioned above (WYSIWYG Filter – http://drupal.org/project/wysiwyg_filter).
If you enable extra buttons on the tinymce wysiwyg profile, you will notice that some of these features (text-alignment, image alignment, font-colors, etc.) don’t work.
Install WYSIWYG Filter module. Under the Input Formats, enable the WYSIWYG Filter and disable drupal’s default HTML Filter.
WYSIWYG Filter Settings:
These settings depend on what functionality you want to allow your users to have. You should sychronize these setting to match up with the buttons that you enable in the WYSIWYG profile. The module default are good and safe. Below are more liberal examples:
RESTRICTED access which doesn’t include images:
@[style],
a[!href|target&grt;_blank|title],
em, strong, strike, sub, sup, i, b,
ul, ol, li, dl, dt, dd,
p[align&grt;center?justify?left?right], br, hr,
div[align&grt;center?justify?left?right], span,
address, blockquote, pre, cite, code,
h3, h4, h5, h6
Style Properties:
text-align
text-properties
margins
MOST HTML settings:
@[class|style|title],
a[href|target],
img[src|width|height|alt|border:0],
em/i, strong/b, strike, del, sub, sup, q, acronym, samp, kbd,
ul, ol, li, dl, dt, dd,
p[align&grt;center?justify?left?right], br, hr,
div[align&grt;center?justify?left?right], span,
table[width|cellpadding|cellspacing=0|border=0], tr[align|valign], td[align|valign|width], tbody, th[align|valign|width], thead, tfoot, colgroup, col, caption,
address, blockquote, pre, cite, code,
h1, h2, h3, h4, h5, h6
Style Properties
color
text-align
margin
padding