Style & Class attributes in Drupal CK Editor

Style & Class attributes in Drupal CK Editor

Even with the Full CKEditor input profile/filter classes and styles get removed from elements. Sometimes clients need to add styles or classes to elements and having them stripped all the time is pretty frustrating.

Luckily there's a simple fix that can be added to the Custom JavaScript configuration under Advanced options at admin/config/content/ckeditor/edit/Full

Paste in :

config.extraAllowedContent = '*(*){*}';

and classes & styles will be allowed on every element, to restrict it to just divs for example you would use:

config.extraAllowedContent = 'div(*){*}';


The (*) allows any classes to be added, you can restrict this by entering named classes you want to allow.

The {*} allows any inline style to be added.

If you need to be able to add other attributes you can add [*] to allow the adding of any attribute. Again, this can be restricted by using a named target element and/or named attributes between the tags.

And that is how easy it is to let your users add styles and attributes to the CKEditor WYSIWYG in Drupal 7. Of course, whether it's a good idea or not is another topic entirely...

For a more complete guide to customising CKeditor WYSIWYG experience in Drupal 7 see this microserve article