Wrapping text around image CKEditor

[MilenKo]

Hello guys. I feel a bit ashamed of this fact but I just needed to add an image with some text wrapped around it using CKEditor and I simply can't achieve that. I have an image field attached to the template (called images) and it is showing promptly the uploaded images. I am able to manipulate the image and I set its alignment to left side. Then I add some text and I can see in CKEditor that the text is properly surrounding the image. However, once I save the page and view it, it shows the text under the image or only a line is staying asside the image and the rest is under the image again. As far as the field used for the text (body) is set to TextMultiLang and I did not added any text formatters and chose the content type to be HTML/Markup.

In my CSS I've added some of the PW styles for the alignement as per some posts here but that did not help either. Something I am missing again?

 

Spoiler

 

 

Spoiler

 

[szabesz]

Hi,

I do it this way: in /site/modules/InputfieldCKEditor/styles.js I have:

CKEDITOR.stylesSet.add( 'mystyles', [
 { name: '1/2 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-2@s site-mar-r-10'} },
 { name: '1/2 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-2@s site-mar-l-10'} },
 { name: '1/3 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-3 site-mar-r-10'} },
 { name: '1/3 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-3 site-mar-l-10'} },
 { name: '1/4 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-4 site-mar-r-10'} },
 { name: '1/4 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-4 site-mar-l-10'} },
 { name: 'center image', element: 'img', attributes: {'class': 'align_center uk-align-center'} },
]);

align_left and similar are for the default I copied over from /wire/modules/Inputfield/InputfieldCKEditor/contents.css

uk-float-left and similar are for UIkit 3

This way I do not have to load the whole UIkit 3 css for CKEditor, instead I write my custom rules for the RTE in order the get what will be seen on the frontend. It is some extra work but there are not too many styles needed to be used in the RTE anyway.

[MilenKo]

Thanks, @szabesz . Initially I thought it would need some styling for the output, however I was mislead by the appearance of the content inside the editor and thought that I am not doing something properly. Your suggestion seems to be quite easy doable however I should just match the proper classes for bootstrap as I don't use uikit on this project.

[theo]

A class using float:left should be enough for both frameworks imho.

.float_left {
    float: left;
}

Or separate for BS4: https://getbootstrap.com/docs/4.0/utilities/float/

[MilenKo]

Thank @theo . That is what I added to my CSS, however I forgot the fact that CKEditor is not inserting the class automatically so I will have to add the classes using myclass.js approach. Let me see how would that work out,

[MilenKo]

It works perfectly fine now. And yes, @theo it worked with Bootstrap and uikit. Thanks again. I guess I could do the same exercise for styling ordered and unordered lists, block quotes etc.