Drupal has a system of input filters that allows you to granularly control exactly what type of markup your content editors can publish. This comes down to things like which HTML tags they are allowed to use and if they can reference JavaScript/CSS files with style tags. No problem, just slap on Drupal’s built in HTML filer to kick out all that harmful stuff, and let them publish away. But what happens when you want to use inline CSS styling?

Well you might see an issue like this.

Drupal’s default HTML Filter

The HTML filter, according to Drupal "allows you to restrict whether users can post HTML and which tags to filter out. It will also remove harmful content such as JavaScript events, JavaScript URLs and CSS styles from those tags that are not removed." So basically it is a good idea to have this turned on. If you don’t, users posting with an input profile with no HTML filter can go ahead and XSS your site to death.

Inline styles disallowed

Unfortunately, Drupal’s HTML filter will strip your code of inline styling, even if you are using it in conjunction with an allowed HTML element. This can become a problem when, for example, you are using the ImagePicker module that floats an image left or right by adding inline CSS to the inserted thumbnail. If you think about, not being allowed to use inline CSS can really become a problem if the user is advanced enough to need it.

Well the most obvious solution is to disable the HTML filter from the given input profile (by the way, if you are using a WYSIWYG editor like FCKeditor, it has its own HTML filter which you will additionally need to disable). However, we have already mentioned what is at stake without an HTML filter turned on, so this is not the way to go.

Using new filters

Drupal is the amazing tool that it is by nature of its incredible community. Lucky for us, there are two modules I know of that can help you workaround this critical issue. One is called HTML Purifier and the other is WYSIWYG Filter. Both of these modules provide you with a new input filter to enable in place of Drupal’s default HTML filter.

WYSIWYG Filter

After installing the WYSIWYG Filter, disabling Drupal’s HTML Filter, and properly configuring the WYSIWYG Filter, my images inserted with ImagePicker could float based on inline styling. This is my list of allowed elements in the WYSIWYG filter settings:

{syntaxhighlighter brush:text;}
a[*],div[alignHTML Purifier

To install HTML Purifier, you need to install the Drupal module, but also place a copy of the “library” folder from its standalone tarball into the module directory.

After this +1 step install, I enabled the HTML Purifier basic filter (there is also an advanced one), and to my happiness, my content was displaying great without any further adjustments. I think the HTML Purifier filter is more of the “install and go” module, ready out of the box. The advanced input filter has a ridiculous amount of options to configure, so I am sure you can exert the same granular control you can with the WYSIWYG filter.

One issue that I ran into, however, was that I couldn’t figure out how to allow links to have rel=”lightbox” so my images would open with LightBox. I saw the “allowedrel” setting under the advanced filter, but it wasn’t working for me. Strange. Well I’m sticking with WYSIWYG filter, but I’m sure if I played with HTML Purifier more, I would get it to work as needed.