The HTML Purifier module make it possible to easily utilize the “styles”, “fonts” etc. buttons in CKEditor. This video shows how to install and configure that module.

Installation

The HTML Purifier module is configured on a per-text format basis. Since we’re using the Filtered HTML text format for this series, I’ll edit that.

  • Go to “Configuration => Content authoring => Text formats => Filtered HTML” (admin/config/content/formats/filtered_html)

HTML Purifier comes with functionality that replaces the core “Limit allowed HTML tags” filter, so I’ll disable that when I enable the HTML Purifier.

  • Disable “Limit allowed HTML tags” filter
  • Enable “HTML Purifier” filter
  • Drag “HTML Purifier” to the bottom of the list

Now let’s add the allowed HTML tags to our HTML Purifier settings.

  • Click “HTML Purifier” in the “Filter settings” section.

I’ll leave everything as at their default settings except the “Allowed” section.

Allowed

  • uncheck “Null/Disabled”
  • Add the following into the text area:
    • a[href|title],img[title|src|alt],em,strong,cite,blockquote,code,ul,ol,li,dl,dt,dd,p,br,h1,h2,h3,h4,h5,h6,span,*[style]

You’ll notice it’s a comma separated list of html elements and attributes. A couple of things should be pointed out.

  • The “a” tag has “[href|title]” after it. This means that an <a> tag may have an href attribute, which is generally required, as well as a title attribute. Each attribute is separated with a pipe “|”. This allows the user to enter any or all of the allowed attributes.
  • The “span” tag will allow us to enable the “Font” and “Font Size” buttons in the Wysiwyg editor.
  • Finally, the “*[style]” option allows any html element (p, h1, etc.) to use the “style” attribute. So instead of typing “p[style],h1[style],h2[style]” etc, the asterix (*) applies the “style” attribute to any and all elements.

The span and style options are required in order to use the “Font”, “Size”, “Format” and “Styles” buttons in the wysiwyg editor. If you have issues with those buttons, refer back to this video for configuration.

Now that I’m setup, I’ll click “Save”.

One thing to keep in mind when using HTML Purifier, is that if you decide to make a change to the configuration, you must clear the HTML Purifier cache. This can be done at “Configuration => Content authoring => HTML Purifier settings” (admin/config/content/htmlpurifier).