hvlads / django-ckeditor-5

Django CKEditor 5 integration.
Other
152 stars 60 forks source link

Paragraph spacing in the editor UI #254

Closed kevinrenskers closed 1 month ago

kevinrenskers commented 1 month ago

It seems to me that paragraphs don't have enough padding/margin, resulting in paragraphs that appear much too close to each other. This has the effect that less-technical copy writers are pressing the enter key twice instead of once when creating new paragraphs, because to them it doesn't look like a new paragraph when it's so close together. And of course all those empty paragraphs look really bad in the frontend.

See for example a super simple piece of content:

Screenshot 2024-09-30 at 11 06 09

When I inspect these elements then I can see that Django's admin styling is removing the standard padding:

Screenshot 2024-09-30 at 11 11 05

Compare this to how a standard CKEditor instance looks like, by using https://ckeditor.com/ckeditor-5/demo/feature-rich/:

Screenshot 2024-09-30 at 11 15 15

Much much more spacing between the paragraphs. Would it be possible to make sure that Django's admin styling is not messing with the CKEditor styling? Possibly by supplying more overrides in https://github.com/hvlads/django-ckeditor-5/blob/master/django_ckeditor_5/static/django_ckeditor_5/src/override-django.css?

hvlads commented 1 month ago

Hi!

Thank you for your feedback regarding the paragraph spacing in CKEditor. I appreciate your observations, and I will certainly pay more attention to the CSS to improve the styling.

In the meantime, I wanted to point out that you can customize the styling by using the CKEDITOR_5_CUSTOM_CSS setting in your configuration. This allows you to add any overrides you need in the specified CSS file.

Feel free to reach out if you have any other suggestions or questions!

kevinrenskers commented 1 month ago

Yes, that's indeed how I solved the problem. But it seems a bit strange to close this issue and leave it like that? Now everyone has to write their own css overrides?