Apply styles to HTML output of CKEditor 5

Question

I'm using CKEditor 5 to help my customers to publish their articles. But the content generated by the editor is pure HTML piece. How to style the content? Is it possible that the content styled in page's <div/> is the same with styled in ckeditor5?

I know that I can write CSS for the contents, is the best way?

Answer 1

Your question boils down to this FAQ entry:

There is no such thing as the contents.css file because in CKEditor 5 features bring their own content styles, which are by default included in the JavaScript build and loaded by the style–loader (they can be extracted, too). It optimizes the size of the builds as the styles of unused features are simply excluded.

Although some styles are provided by the features, it is up to the developers to make sure the content created by CKEditor 5 is properly styled, both in the front–end and in the back–end. To style the content in the editor (back–end), use the .ck-content CSS class

There are very few content styles provided by the editor at this moment. That's why it's up to website maintainers to style the edited content in the front/back–end.

For instance, to make sure the <a> elements are properly styled, you'd probably want something like this:

#content-container-in-frontend a,
#backend-container .ck-content a {
   ...
}

---

P.S. Don't hesitate to have your say in the issue about content styles. We'd love to know more about your use–case (What's your environment? Do you use Webpack? How do you manage styles in the project?), what would you expect and what works best for you.

---

Update: You can now browse content styles used by the editor and use them in the front-end of your application. Learn more.