ckeditor.styles.js

Last Updated January 2016

The ckeditor.styles.js controls what options are in the Styles drop-down button in the Rich Text editor.

We’re customizing it to provide a few additional stylistic options for the content owners. Your designs should provide CSS styles for the following selections that will be in the Styles drop-down:

Image on Left – float image to the left and add border, padding and margins as desired.
Image on Right – float image to the right and add border, padding and margins as desired.
Clear Floated Elements: clear the floated content above. Can be applied to any element.
Bigger Text – make the text larger using a < span > tag with the class “bigger”.
Fine Print – make the text smaller, using the < small > tag.
Cited Work – cited works (appears as italicized text), using the < cite > tag.
Caption – We’ve been looking at the option of using figure and figcaption, but it doesn’t look promising at this time. For now we imagine the content editor will select text associated with images to apply this styling which will insert a < span > tag with the class “caption”.

Please be aware of all CSS options required for the site.

Create the ckeditor.styles.js file and save it in your theme directory.

Code for ckeditor.styles.js

if (typeof(CKEDITOR) !== 'undefined') {
    CKEDITOR.addStylesSet('drupal', [
       
        /* Classes */
        {
            name: 'Clear Floated Elements',
            element: 'span',
            attributes: {
                'class': 'clear-float'  /* css ex. .clear-float{clear:both;display:block} */
            }
        },

        /* Elements */
        {
            name: 'Bigger Text',
            element: 'span',
            attributes: {
                'class': 'bigger' /* style to your needs */
            }
            
        },
        {
            name: 'Fine Print',
            element: 'small',
        },
        {
            name: 'Cited Work',
            element: 'cite'
        },

        /* Styles- floating images */
        {
            name: 'Image on Left',
            element: 'img',
            attributes: {
                'class': 'float-left'       /* css ex. .float-left{float:left;margin-right:1em;} */
            }
        },
        {
            name: 'Image on Right',
            element: 'img',
            attributes: {
                'class': 'float-right'  /* css ex. .float-right{float:right;margin-left:1em;} */
            }
         }
 ]);
}