HTML Purifier, WYSIWYG & TinyMCE

How to make non-techies happy entering content.

How to Go…

From:To:

The PlotYour non-techie clients/authenticated users want to enter content using a familiar word processor like interface. But….Some of the users are Black Hats looking to trick your honest folks out of their information….The honest folks of your fair site want lots of editing options…While the main client wants content to always look good!

The Problem Children

• The stock Filtered HTML Input Filter– Limited Tags only– NO Attributes need apply

• Full HTML Input Filter– Black Hat Heaven– Danger Will Robinson Danger… invalid

HTML detected!

• WYSIWYG with TOO many options– With Power come great Responsibility

and the ability to make things ugly.

The Good Kids

• HTML Purifier Library and Module– Safe: XSS defeated with audited

whitelist– Clean: Ensures standards compliant

output– Open: Open source and well

supported

• The WYSIWYG Module– One interface to bind them all

• TinyMCE Library– Just a personal / known choice

HTML PurifierRequirements: HTMLPurifier module (drupal.org/project/htmlpurifier)

Libraries API module (drupal.org/project/libraries)

The HTML Purifier PhP Library ( htmlpurifier.org )

Install:1. Download the requirements2. Put the modules in the: sites/all/modules

directory3. Put the HTML Purifier PhP files in:

sites/all/libraries/htmlpurifier The ‘library’ directory in the downloaded archive needs to be under this directory.

4. Enable the Library and HTMLPurifier modules

HTML Purifier

Create an HTML Purifier Input Filter

Notes: Select only one of the HTML purifier filters.

Advanced has more config options.

Generally works best if HTML Purifier is the only enabled filter.

HTML PurifierConfigure HTML Purifier Settings

NOTE: In D6, create the filter first. Then edit the filter and select the configure tab.

Defaults are good.

Click on label to get help.

Things to look at are allowing:

FlashCompat SafeEmbed SafeObject Add _blank to allowed targets TidyFormat

Note: You can have different settings for different filters.

WYSIWYG / TinyMCERequirements:

WYSIWYG Module (drupal.org/projects/wysiwyg) TinyMCE Package (www.tinymce.com)

Installation:

Download required code

Install the TinyMCE package in:

sites/all/libaries/tinymce

Install the WYSIWYG Module in:

sites/all/modules.

Enable the WYSIWYG Module

Configure WYSIWYGAssociate an editor with text / input formats:

Note: Expand Installation Instructions to see how to install other editors.

Configure WYSIWYGBasic Settings:

Defaults are OK.

Editor Appearance:

Defaults of OK

Cleanup and Output:

Verify HTML – Safest if ON Preformatted – Can be ON (Default) or OFF Convert – Can be ON (Default) or OFF Remove Linebreaks – Turn OFF with HTML Purifier only inputs Apply source formatting – Turn ON to make source editing better Force cleanup on standard paste – Turn ON to keep out MS “extras”

Configure WYSIWYGA Good Buttons and Plugins setup

Bold Italic Underline

Align Left Align Center Align Right

Bullet List Number List Outdent

Indent Link Unlink

Image Block Fmt Styles*

Blockquote Src Code* Remove Fmt

Adv Image Advance Link Inline Popup

Paste f/ Word Table Media*

IMCE* Teaser Break*

* Use for Content Managers only

Notes:

Each input filter that uses aWYSIWYG profile can haveseparate configurations.

Configure WYSIWIGCSS Configuration

Block formats:Specify which HTML tags are listed in the Format dropdown.

Editor CSS:Best setting is “Use theme CSS” but “Define CSS” can be useful.

CSS Path:Path to CSS file if Editor CSS is set to “Define CSS “

CSS Classes:Define the specific classes seen in the Styles drop down.

Keep it WYSIWYGThe Drupal default is to switch to the admin theme when editing nodes… this make the editor output look different that the final output.

Fix this by:- Go to Admin / Appearance- At the bottom of the page, uncheck the option:

Use the administration theme when editing or creating content.

TinyMCE (and others) work via an IFRAME with an editor generated page in it. This means the background color or image can be repeated or not match the page. To fix this add the following CSS to your theme.

body.mceContentBody { background: none; background-color: transparent; margin: 10px;}

Best PracticesUse different text / input formats for various roles to limit editing “power”. E.g., have a text format for anonymous users that has limited TinyMCE options, one for authenticated users, and one for content managers.

Check the Site updates report for new messages about new versions of HTML Purifier. Updating is generally safe as the API is stable.

ALWAYS test all function when you install a new version of an editor! (e.g. TinyMCE 3.x to 4.x). New versions can break WYSIWYG module’s API code.

Troubleshooting

If content a user enters is disappearing (e.g. specifying an external link or open on new page), check the HTML Purifier settings to see if this is denied and can be allowed.

Note this can be a problem when poorly formatted existing content is converted to the HTML Purifier input format.

A test to see if HTML Purifier is causing problems is to configure the Full HTML input format with a WYSIWYG profile and see if works. If it works with full HTML and not the other, the HTML Purifier is removing info.

Advanced Topics

Several modules include WYSIWYG ‘bridge’ modules. E.g.: IMCE’s Wysiwyg API bridge. These add extra functionality to specific editors.

Generally installed by enabling module and then configuring the option to be part of one or more WYSIWYG profiles

Questions?