Opened 7 years ago

#16998 new Bug

CKEditor Style for <img> not working because it is an "image" widget

Reported by: Tom Atkins Owned by:
Priority: Normal Milestone:
Component: Core : Styles Version: 4.7.0
Keywords: Drupal Cc:


Steps to reproduce

Problem in Drupal 8:

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

  1. Navigate to "Configure" the "Full HTML" text format profile at admin/config/content/formats/manage/full_html
  2. Under "Toolbar Navigation" drag the "Style" dropdown menu into the active toolbar
  3. This will add a new vertical navbar to the profile page, "Styles Dropdown"
  4. Create a rule for an image element, i.e., img.testStyle|Test Style and save the configuration update
  5. Create a new "Base page" node and add an image to the body field
  6. 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.

Expected result

Should be able to assign custom classes to images.

Actual result

Styles button remains inactive. Or, if it does stay active, on draft code view of content the "image" class will change once saved in Drupal to "img".

Other details (browser, OS, CKEditor version, installed plugins)

Drupal CKEditor version 8.3.1 - also 8.4 dev and Drupal 8.1.1 - See drupal issue:

Change History (0)

Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy