ckeditor custom style for img not showing in dropdown

Question

I have this is my config file:

CKEDITOR.stylesSet.add( 'custom_styles', [
    { name: 'Paragraph', element: 'p' },
    { name: 'Heading 3', element: 'h3' },
    { name: 'Heading 4', element: 'h4' },
    { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } },
    { name: 'Custom Image', element: 'img', attributes: { 'class': 'myClass' } }
]);

but in the dropdown only the first 5 are showing, even when I click on an image. I've tried it in recent Chrome and Firefox and the config is not being cached (I added the yellow style to check that and it works fine). When I click on the image the bottom bar shows "body p image" but the default in the dropdown says "paragraph". I've also tried switching the order of styles around.

Documentation seems straight-forward so I'm not sure what I'm doing wrong. Is there some trick to getting object styles to show up?

EDIT: There also seems to be something strange going on with other selected parts. I have Image2 plugin and when I add a link to an image then click that image the bottom bar just shows "body p image" and doesn't mention the "a" even though it's there in the HTML.

Answer 1

Images in ckeditor now use a widget system. I'm not sure why this is not really documented yet but the solution is to specify:

• type: widget
• widget: image

So the following should work:

{ name: 'Custom Image', type: 'widget', widget: 'image', attributes: { 'class': 'myClass' } }