CKEditor extraAllowedContent with a Twist

Ever wanted to have fun with CKEditor? Well, let's see.

We wanted to allow CKEditor to have an in-line stylesheet for a specific class while enabling the Advanced Content Filter. This turns out pretty tricky because of the spotty CKEditor documentation and we thought we'd share. Here is a simple one liner that can solve your headache.

config.extraAllowedContent = 'a(!simple-button-plugin){*}[*]';

This will have the following effect:

• a - Element you want to keep the in-line style.
• !simple-button-plugin - The simple-button-plugin is a class name and ! forces the button to be matched.
• {*} - Allows all style properties be allowed.
• [*] - Allows all attributes be allowed.