How Do I Add Custom Styles Based on CSS Classes?

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

Add a style definition as described in the How do I customize the Styles drop-down list? article and pass the class name in the attributes parameter.

important note

Do remember that since class is a resereved word in JavaScript, you need to place it in quotes.


The following example adds a myClass class to an img element. The image element will now be styled as defined in this CSS class.

{
	name : 'Custom Image',
	element : 'img',
	attributes : { 'class' : 'myClass' }
}

For more details on the definition format and best practices on how to customize the styles please refer to the Styles article from the Developer's Guide.

This page was last edited on 9 March 2011, at 06:53.