CODEWITHSUNDEEP
javascriptckeditormura
John Sieber
John Sieber

Reputation: 322

CKeditor applied class is hiding some images from view in editor

I'm using CKEditor 4.8.0 and in some instances, my images do not appear within the CKEditor window but do display in the actual page output. Looking into it further, I see that the image tags are wrapped with a span tag that has the following classes: cke_widget_wrapper, cke_widget_inline, cke_widget_image, cke_image_nocaption.

<span tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption" data-cke-display-name="image" data-cke-widget-id="19" role="region" aria-label="image widget">

The cke_widget_inline class sets display: inline-block; and this is hiding these specific images from being displayed in the WYSIWYG editor.

The markup is straight forward:

<div class="col-sm-6 illustration">
   <img src="/sites/default/assets/image/blog/LandingPage/getting_started.svg">
</div>

I've noticed other images that do appear are also wrapped in this span tag with these classes and the images still appear, so what issue could cause these images to not display or is it possible to tell CKEditor to not add the cke_widgit_inline class to elements using the config.js?

Upvotes: 0

Views: 376

Answers (1)

John Sieber
John Sieber

Reputation: 322

This ended up being a CSS issue where the images in this particular markup need to have width and height defined when CKEditor applies the class to the span that contains the display: inline-block; rule.

I resolved this issue by applying a height and width when this cke_widget_inline class exists allowing it to show in both CKEditor and the quick edit mode using CKEditor on the front end of our website.

Upvotes: 1

Related Questions