CKEditor custom styles

README.md

• If Advanced Content Filter is enabled, need to configure "extra allowed content" to let elements have classes.
• A catch all value is *(*), which means any element can have any class added to it.
• To refine this, you can limit available classes, like *(left, right), which will only let "left" and "right" classes be added.
• Enhanced Image (image2 plugin) can only be targeted through a "widget" type, by defining type: 'widget' and then widget: 'image'.

ckeditor.css

/* Text Light */

div.text-light, p.text-light, blockquote.text-light {
  color: #666;
}

/* Inline List */

ul.inline li {
  display: inline;
}

/* Image Padding Left & Image Padding Right */

.img-padding-left {
  padding-left: 10px;
}
.img-padding-right {
  padding-right: 10px;
}

ckeditor.js

if (typeof(CKEDITOR) !== 'undefined') {
  CKEDITOR.addStylesSet('drupal', [
    // "text-light" class on multiple elements.
    {
      name: 'Text Light',
      element: ['div', 'p', 'blockquote'],
      attributes: {class: 'text-light'}
    },
    // "inline" class on ul elements.
    {
      name: 'Inline List',
      element: 'ul',
      attributes: {class: 'inline'}
    },
    // "img-padding-left" and "-right" classes on image widgets.
    {
      name: 'Image Padding Left',
      type: 'widget',
      widget: 'image',
      attributes: {class: 'img-padding-left'}
    },
    {
      name: 'Image Padding Right',
      type: 'widget',
      widget: 'image',
      attributes: {class: 'img-padding-right'}
    }
  ]);
}