Jump to content

Wrapping text around image CKEditor


MilenKo
 Share

Recommended Posts

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

CKEDITOR-inner.png

 

 

Spoiler

CKEDITOR-frontend.png

 

Link to comment
Share on other sites

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.

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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,

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...