(Legacy) Content styles
⚠️ We changed installation methods and this legacy guide is kept for users’ convenience. If you are looking for current CKEditor 5 installation instructions, please refer to the newest version of the Editor and content styles guide.
Some core editor features bring additional CSS to control the look of the content they produce. Take, for example, the image feature that needs special content styles to render images and their captions in the content. Or the block quote feature that displays quotes in italics with a subtle border on the side.
Content styles are bundled along with editor UI styles and, together with the JavaScript code of CKEditor 5, they create a monolithic structure called an editor build. By default, content styles are inseparable from the rest of the editor. This means there is no CSS file containing them you could take straight from the editor and use in your application (as opposed to the CKEditor 4 contents.css file). To get the editor content styles, for instance, for the frontend of your application, you will have to take additional steps described in this guide.
# Sharing content styles between frontend and backend
By default, content styles are loaded by the editor JavaScript. This makes them present only when users edit their content and this, in turn, usually takes place in the backend of an application. If you want to use the same styles in the frontend, you may find yourself in a situation that requires you to load CKEditor just for that purpose, which is (performance–wise) not the best idea.
To avoid unnecessary dependencies in your frontend, use a style sheet with a complete list of CKEditor 5 content styles used by all editor features. You can generate it by using a dedicated script. Learn more in the Development environment guide. Then, load the content-styles.css file in your application by adding the following code to the template:
<link rel="stylesheet" href="path/to/assets/content-styles.css" type="text/css">
The content in the frontend of your application should now look the same as when edited by the users.
Important!
If you take a closer look at the content styles, you may notice they are prefixed with the .ck-content class selector. This narrows their scope when used in CKEditor 5 so they do not affect the rest of the application. To use them in the front–end, you will have to add the ck-content CSS class to the container of your content. Otherwise, the styles will not be applied.
If you are not afraid to get your hands dirty, you can always create a custom CKEditor 5 preset from the source code with all the CSS (both UI and the content) extracted to a separate file. See how to do that in a dedicated guide.
# Styling the published content
Your application is typically divided into two areas. Content creation, which hosts the editor and is a writing tool, and content publishing, which presents the written content.
It is important to use the content styles on the publishing side of your application. Otherwise, the content will look different in the editor and for your end users.
There are two ways to obtain the content styles:
- From the
npmpackages, in thedist/ckeditor5-content.cssandckeditor5-premium-features-content.csslocation. - From our CDN,
https://cdn.ckeditor.com/ckeditor5/
Below is an example with placeholder paths showing how to load the ckeditor5-content.css (and ckeditor5-premium-features-content.css, if needed) file on the publishing side.
<link rel="stylesheet" href="path/to/assets/ckeditor5-content.css">
<!-- If you are using premium features: -->
<link rel="stylesheet" href="path/to/assets/ckeditor5-premium-features-content.css">
<!-- If you have other style sheet that changes the look of the content: -->
<link rel="stylesheet" href="path/to/assets/styles.css">
The final setup depends on how your application is structured. As mentioned earlier, you can use our CDN, or your JS bundler already creates and serves combined style sheets. Choose the solution that works best for your case.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.
With the release of version 42.0.0, we have rewritten much of our documentation to reflect the new import paths and features. We appreciate your feedback to help us ensure its accuracy and completeness.