CKEditor styles dropdown: add class to the selected element

Question

What I'm trying to do in CKEditor is to add some custom styles that should apply on several elements. Each of my element (title from h2 to h6, plus link a) must have 3 itemizations that only changes color.

To avoid describing each style one by one: H2 Red, H2 Blue, H2 Green, H3 Red, H3... I wanted to select the element as usual from the Format list, then the itemization from the style list. I would have 3 styles: Red, Blue, Green, that could apply to the selected element by simply adding a class, not by defining itself the element.

Is it doable?

I considered using a custom color list (http://docs.ckeditor.com/#!/guide/dev_colorbutton) but colors are added "on-the-fly" with the color code, therefore when your site coloring changes, you can't simply change 3 classes color property, you have to modify all your authored texts, what I don't want, and which is honestly less elegant.

I tried to setup a style like this, without a specified element (I'm under Drupal but we don't really care):

if (typeof(CKEDITOR) !== 'undefined') {
  CKEDITOR.addStylesSet( 'drupal',
  [
    {
      name : 'Blue',
      attributes :
      {
        'class' : 'color-blue'
      }
    },
    {
      name : 'Green',
      attributes :
      {
        'class' : 'color-green'
      }
    },
    {
      name : 'Red',
      attributes :
      {
        'class' : 'color-red'
      }
    },
  ]);
}

But it doesn't work, a span is automatically added.

Thanks for your help!

AntoineV AntoineV · Accepted Answer · 2015-12-17T18:15:56

Duplicate of http://ckeditor.com/forums/CKEditor/Adding-class-to-the-current-text-block-regardless-of-the-elementtag No answer neither since a year, so it should not be doable...

CKEditor styles dropdown: add class to the selected element

1 Answers