Drupal Module moment: WYSIWYG Filter

Open Source Drupal

Node Author
Thomas Dik

Every now and then you come across a module you wished you saw before. And I wonder why we did not discover this one earlier: WYSIWYG Filter. It even exists since Drupal 6.

WYSIWYG Filter is solving the following problem:

After installing the Wysiwyg module – and when you are using for example TinyMCE as editor – desired buttons can be configured under /admin/config/content/wysiwyg/profile/

This will offer you a text editor and will avoid content managers having to write HTML code:

(Screenshot from Drupal intranet OpenLucius)

To make sure this HTML is shown in the frontend (for visitors) you will need to allow these elements. This can be set under ‘text formats’ (/admin/config/content/formats). In a default Drupal installation it is needed to enable the following filter (to protect your Drupal against unsafe and unwanted html/js): ‘Limit allowed HTML tags’. Then you will need to specify the allowed elements:

The problem now is that everything will be stripped, except what is standing here. So also the required HTML attributes and properties. Like for example inline styles to line out text and apply colour, but also required id’s and classes. After installation of the module this problem will be solved, as it is offering the right configuration tools and therefore allowing elements, attributes and properties required by you for Drupal site visitors:

A detailed screenshot can be found here and is also showing that whitelists can be added for required allowed:

  • classes
  • element id’s
  • URL’s with inline styles
  • domains

The module can also, for example, automatically place rel="nofollow" based on your settings. This way the content flow will be build in a comprehensive manner for search engines which is great for your Drupal SEO.

Integrated default safety

HTML attributes related to the DOM events (on*) are not permitted for safety reasons (e.g. to prevent XSS). Also, the following elements are not allowed for safety reasons: applet, area, base, basefont, body, button, embed, form, frame, frameset, head, html, iframe, input, isindex, label, link, map, meta, noframes, noscript, object, optgroup, option, param, script, select, style, textarea, title.

Wrap up

De module is included in the Drupal 8 core, but since Drupal 7 will stay around a little while longer it seemed a good idea to share some knowledge about this Drupal module. Questions or feedback? Let me know!

Header photo credit: Karl Fredrickson