HTML Purifier, WYSIWYG, and TinyMCE


Published on

Presentation to TriDUG on April 16, 2013 about how to set up a secure and user friendly WYSIWYG editor environment while maintaining site stylistic guidance. Note, this features the TinyMCE editor but this can be used with any editor that the WYSIWYG module supports.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML Purifier, WYSIWYG, and TinyMCE

  1. 1. HTML Purifier, WYSIWYG & TinyMCE How to make non-techies happy entering content.
  2. 2. How to Go…From: To:
  3. 3. The PlotYour non-techie clients/authenticated userswant to enter content using a familiar wordprocessor like interface. But….Some of the users are Black Hats looking totrick your honest folks out of theirinformation….The honest folks of your fair site want lotsof editing options…While the main client wants content toalways look good!
  4. 4. 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.
  5. 5. 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
  6. 6. HTML PurifierRequirements: HTMLPurifier module ( Libraries API module ( The HTML Purifier PhP Library ( )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
  7. 7. 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.
  8. 8. HTML Purifier Configure 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.
  9. 9. WYSIWYG / TinyMCERequirements: WYSIWYG Module ( TinyMCE Package ( Download required code Install the TinyMCE package in: sites/all/libaries/tinymce Install the WYSIWYG Module in: sites/all/modules. Enable the WYSIWYG Module
  10. 10. Configure WYSIWYGAssociate an editor with text / input formats:Note: Expand Installation Instructions to see how to install other editors.
  11. 11. Configure WYSIWYGBasic Settings: Defaults are OK.Editor Appearance: Defaults of OKCleanup 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”
  12. 12. Configure WYSIWYG A 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 PopupNotes: Paste f/ Word Table Media*Each input filter that uses a IMCE* Teaser Break*WYSIWYG profile can haveseparate configurations. * Use for Content Managers only
  13. 13. Configure WYSIWIGCSS ConfigurationBlock formats:Specify which HTML tags are listed inthe 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 theStyles drop down.
  14. 14. Keep it WYSIWYGThe Drupal default is to switch to the admin theme when editing nodes… thismake 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 init. This means the background color or image can be repeated or not matchthe page. To fix this add the following CSS to your theme. body.mceContentBody { background: none; background-color: transparent; margin: 10px; }
  15. 15. Best PracticesUse different text / input formats for various roles to limitediting “power”. E.g., have a text format for anonymoususers that has limited TinyMCE options, one forauthenticated users, and one for content managers.Check the Site updates report for new messages aboutnew versions of HTML Purifier. Updating is generallysafe as the API is stable.ALWAYS test all function when you install a new versionof an editor! (e.g. TinyMCE 3.x to 4.x). New versions canbreak WYSIWYG module‟s API code.
  16. 16. TroubleshootingIf content a user enters is disappearing (e.g. specifying anexternal link or open on new page), check the HTMLPurifier settings to see if this is denied and can be allowed.Note this can be a problem when poorly formattedexisting content is converted to the HTML Purifier inputformat.A test to see if HTML Purifier is causing problems is toconfigure the Full HTML input format with a WYSIWYGprofile and see if works. If it works with full HTML andnot the other, the HTML Purifier is removing info.
  17. 17. Advanced TopicsSeveral modules include WYSIWYG „bridge‟ modules.E.g.: IMCE‟s Wysiwyg API bridge. These add extrafunctionality to specific editors.Generally installed by enabling module and thenconfiguring the option to be part of one or moreWYSIWYG profiles
  18. 18. Questions?