I can not assign a class to the img element using the new "Styles Dropdown" for the relevant CKEditor profile. I can do so with block or inline elements, such as h1 or span elements.
Steps to replicate
- Navigate to "Configure" the "Full HTML" text format profile at
admin/config/content/formats/manage/full_html
- Under "Toolbar Navigation" drag the "Style" dropdown menu into the active toolbar
- This will add a new vertical navbar to the profile page, "Styles Dropdown"
- Create a rule for an image element, i.e.,
img.testStyle|Test Style
and save the configuration update - Create a new "Base page" node and add an image to the body field
- Select the image either by directly clicking it or by using the CKEditor element selector in the ckeditor pane footer (the span#cke_1_bottom region) The styles button remains inactive
Note: If I change "img.testStyle|Test Style" to "image.testStyle|Test Style" I can apply the style through the styles dropdown, but CKEditor will wrap the img element in an image element, which itself will be "corrected" to two img tags.
Original markup:<p><img alt="test" data-entity-type="file" data-entity-uuid="558bfafa-8b58-4c18-b529-41a58a53c795" src="/sites/default/files/inline-images/take-two.JPG" /></p>
Applied markup:<p><image class="testStyle"><img alt="test" data-entity-type="file" data-entity-uuid="558bfafa-8b58-4c18-b529-41a58a53c795" src="/sites/default/files/inline-images/take-two.JPG" /></image></p>
"Corrected" markup:<p><img class="testStyle" /><img alt="test" data-entity-type="file" data-entity-uuid="558bfafa-8b58-4c18-b529-41a58a53c795" src="/sites/default/files/inline-images/take-two.JPG" /></p>