Images not working in CK Editor in Strapi BUG

[sfita]

Hey,

I am using the CK Editor in Strapi and I cannot allign images correctly within text. They get blown up (photo below)

Also, I have to center the image from the top bar, I cannot use the bar which pops up when clicking on the image. The image gets very big

Can someone help, please?

[Mgsy]

Hey @sfita! Could you please share the exact steps to reproduce the issue and describe the actual and the expected result?

[sfita]

Hey @Mgsy!

I am trying to allign the image in the text body, like this:

But if I use any of these controls:

The image on the website changes its size and is very big:

The same thing goes for when trying to center allign the image. In order to center it, I have to use the bar at the top:

Hope I've been clear, do let me know if further details are needed!

[Pave91]

I can relate on that, I have the same issue. Important information - when editor is rendering normal HTML I can see valid information and it'S saved. Different it is when I use as output markdown, then info about size image or other isn't reflected to markdown.
Is that anything what can be fixed?

[sulavsssmc]

Hey @Mgsy!

I am trying to allign the image in the text body, like this:

But if I use any of these controls:

The image on the website changes its size and is very big:

The same thing goes for when trying to center allign the image. In order to center it, I have to use the bar at the top:

Hope I've been clear, do let me know if further details are needed!

Did you find any solution yet?

[sfita]

Hello Sulav, Unfortunateloy not, the situation is the same. I was hoping someone on the development side can update this, but haven't heard back. Thank you! [cid:8026da45-2dee-4ed8-8cb7-73a3fc7ab31c] Daniel ?fi?a Social Media Specialist [Graphical user interface, text, application Description automatically generated]<https://www.mindit.io/blog-our-team/mindit-io-is-now-officially-a-great-place-to-work> [Logo Description automatically generated] <https://www.mindit.io/blog-events/mindit-io-won-3-silver-awards-at-the-19th-annual-stevie-r-awards-for-women-in-business-2022> [A black and white logo Description automatically generated with medium confidence] <https://www.mindit.io/blog-events/mindit-io-wins-the-best-benefits-strategy-award-at-the-2022-employer-branding-awards> +40 742 631 656 | www.mindit.io<http://www.mindit.io/> Bucharest, Romania [cid:0b561bd9-7288-4aba-940c-e9283f89c2e5]<https://www.mindit.io/blog-our-team/irina-arsene-mindit-io-founder-wins-the-first-ever-inspiring-woman-of-the-year-award-at-2023-ey-entrepreneur-of-the-year-tm-gala> [cid:31918536-e092-47ce-aa3d-241c2d63bef5]<https://www.linkedin.com/company/5359695/admin/feed/posts/>[cid:37084049-30dd-435c-bdbe-b97e90cf95c9]<https://www.facebook.com/mindit.io> [cid:e11c7d5e-fade-4718-b058-7ef7cdcee725] <https://www.instagram.com/mindit.io/> [cid:d1e43333-1e77-498a-a6d3-a7d5ad765604] <https://twitter.com/mindit_io> We thank you in advance for not printing this e-mail unless it is mandatory, hence making a small step to protect the environment. In case you are not the addressee of this e-mail, please inform the sender asap and delete the e-mail. It might contain confidential information that you are not authorised to use or see. Thank you for your understanding and collaboration!

…

________________________________ From: Sulav ***@***.***> Sent: Monday, June 3, 2024 8:06 AM To: ckeditor/strapi-plugin-ckeditor ***@***.***> Cc: Daniel Sfita ***@***.***>; Mention ***@***.***> Subject: Re: [ckeditor/strapi-plugin-ckeditor] Images not working in CK Editor in Strapi BUG (Issue #97) You don't often get email from ***@***.*** Learn why this is important<https://aka.ms/LearnAboutSenderIdentification> Hey @Mgsy<https://github.com/Mgsy>! I am trying to allign the image in the text body, like this: [image]<https://private-user-images.githubusercontent.com/155552746/295205920-0e6b666a-a1c4-4df8-932a-eaaafa1de123.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTczOTE0MTUsIm5iZiI6MTcxNzM5MTExNSwicGF0aCI6Ii8xNTU1NTI3NDYvMjk1MjA1OTIwLTBlNmI2NjZhLWExYzQtNGRmOC05MzJhLWVhYWFmYTFkZTEyMy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjAzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYwM1QwNTA1MTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02N2UzYWE0NDUwOGU4MTY0ZjA3MjE0MDZmMTI0YjIwNGQzZjFhZTYxMzIzMWRjNzJmMzI2MTNlOGYyZmEwMWI5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.Y_5ENyJrNT5iaFThzVc6MB6W93zS1CI0-tAQk1tPZsc> But if I use any of these controls: [image] <https://private-user-images.githubusercontent.com/155552746/295206027-366e17f1-2c35-4026-b478-06972179d724.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTczOTE0MTUsIm5iZiI6MTcxNzM5MTExNSwicGF0aCI6Ii8xNTU1NTI3NDYvMjk1MjA2MDI3LTM2NmUxN2YxLTJjMzUtNDAyNi1iNDc4LTA2OTcyMTc5ZDcyNC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjAzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYwM1QwNTA1MTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00MTI0ZjM1MzRmMzU2MGYxODdlOWQxZDRjZTM4MTgyNDgyODc1NWM0MzQwZmRhZDNiZTMwYTg5MjUwYmRiMzUzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.TiVumyk1FewaWMipsTlHek148dp8eBXfB7x-rJEBEbw> The image on the website changes its size and is very big: [image]<https://private-user-images.githubusercontent.com/155552746/295206200-52a92229-8a21-40a6-a1bd-ddc1cc758b65.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTczOTE0MTUsIm5iZiI6MTcxNzM5MTExNSwicGF0aCI6Ii8xNTU1NTI3NDYvMjk1MjA2MjAwLTUyYTkyMjI5LThhMjEtNDBhNi1hMWJkLWRkYzFjYzc1OGI2NS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjAzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYwM1QwNTA1MTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iODA3OTFlMTBiNjAyNjViY2I1MWQ1NGM4YTgwYzFhMjZiMjhjMGY4N2E2YzI5NmRjMmNlMjA3OTI0YjNiZGE1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.Pkny6Qm-5XnlXLZSoZcbuGe_RBF02KAokpOcFpMVMfw> The same thing goes for when trying to center allign the image. In order to center it, I have to use the bar at the top: [image]<https://private-user-images.githubusercontent.com/155552746/295206544-a52abda9-5fcb-422f-a531-8aadcc1654e0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTczOTE0MTUsIm5iZiI6MTcxNzM5MTExNSwicGF0aCI6Ii8xNTU1NTI3NDYvMjk1MjA2NTQ0LWE1MmFiZGE5LTVmY2ItNDIyZi1hNTMxLThhYWRjYzE2NTRlMC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjAzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYwM1QwNTA1MTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yMzA4NjE4ZTM0MmZmY2NjMzFkOWRhYTgzNDE3MjY2YzA3NDQ3MTdjZTc2YTZkMDVhYTFjYmM0MjdkY2M3MmI0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.rvKOzuUR-uCVp_RD3HKOtN5M_0TA0kuP7HasypZugxo> Hope I've been clear, do let me know if further details are needed! Did you find any solution yet? — Reply to this email directly, view it on GitHub<#97 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BFCYX2THKASOICMHXVZLSELZFP2WJAVCNFSM6AAAAABBLOYC7OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBUGI4DSMZYGE>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[sulavsssmc]

Like Pave91 mentioned above, can you check if the output of Ckeditor is set to Markdown? When the output is set to Markdown, the supported options are few.

Unfortunately this is Not a Bug as Markdown output is limited to basic formatting options. After changing it to HTML, the features such as image alignment, re-sizing, highlighting and every other features will work.