Image2 Image Alignment

[wesleywesley]

Steps to reproduce

1. Add image2 plugin.

2. Add config setting:

 config.image2_alignClasses = ['left-image', 'center-image', 'right-image'];

3. custom css file with

img.left-image, .left-image img {
  float: left;
  margin-right:10px;
  display: block;
}


img.right-image, .right-image img {
  float:right;
  margin-left: 10px;
  display: block;
}

img.center-image, .center-image img {
  margin: 0 auto;
  display: block;
}

4. Add an image in the editor, set to right aligned.

Expected result

Image should be floating to the right.

Actual result

Image is not floating to the right.

The CSS in the editor around the image is as follows:

<p><span tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_inline cke_image_nocaption right-image cke_widget_selected" data-cke-display-name="afbeelding" data-cke-widget-id="0"><img alt="" class="cke_widget_element" data-cke-saved-src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" data-cke-widget-data="%7B%22hasCaption%22%3Afalse%2C%22src%22%3A%22https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F604644048%2Fsign051.gif%22%2C%22alt%22%3A%22%22%2C%22width%22%3A%22%22%2C%22height%22%3A%22%22%2C%22lock%22%3Atrue%2C%22align%22%3A%22right%22%2C%22classes%22%3Anull%7D" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image"><span class="cke_reset cke_widget_drag_handler_container" style="top: -15px; left: 10px; display: block; background: url(&quot;http://domain.com/assets/components/ckeditor/plugins/widget/images/handle.png&quot;) rgba(220, 220, 220, 0.498039);"><img class="cke_reset cke_widget_drag_handler" data-cke-widget-drag-handler="1" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" width="15" title="Klik en sleep om te verplaatsen" height="15" draggable="true"></span></span></p>

The important thing is the class cke_widget_inline.

This has display:inline-block and this does not work well together with float:right in the .right-image class.

4. Fix

To fix it, I had to add this code to my CSS:

But I don't think any user knows to do that..

span.cke_widget_inline.right-image, span.cke_widget_inline.left-image, span.cke_widget_inline.center-image {
  display: block;
}

Am I doing anything wrong, or is there a bug with this plugin?

[Jakub Ś]

Am I doing anything wrong, or is there a bug with this plugin?

So, I don't think you should be changing display of element, styled on purpose as inline-block, to block.

When you download full package with image2 (​http://ckeditor.com/builder), open a demo of image2 and start aligning images or other elements, they will gain either test-align:right/left or float:right and it works very well even with image2 (The float:right/left doesn't seem to conflict with it).

Could you perhaps tell me why are you adding custom classes when all seem to work well with default alignments?

[Jakub Ś]

I have just checked example from docs - ​http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-image2_alignClasses and all worked fine. I just needed to clear cache so that new styles could be read by browser.

I'm closing this ticket as I don't see any problem here.