Wysiwyg content

This is a CSS-only component to theme the output of wysiwyg.

This component can be loaded in conditionally from other components. 

It can be used for both frontend as backend when people are working in the wysiwyg.

Using the CSS in the frontend

The library can be attached to fields that output wysiwyg, so for example in node--full.html.twig, you could add:

{% block before %}
  {{ attach_library('compony/wysiwyg-content') }}
{% endblock %}

A good use case would be to add it to a field that is using a field formatter that uses wysiwyg by default: Field with basic HTML wysiwyg and Field with Full HTML wysiwyg components.


Using the CSS in the backend

The library can be passed on to the CKEditor by linking to the CSS files from

# Define the css files that have to theme the wysiwyg in the backend.
  - components/_global--compony-specific/dist/style.css
  - components/wysiwyg-content/dist/cke__iframe.css

The cke__iframe.css is a copy of the contents of wysiwyg-content.css but every line in CSS is prefixed with the class that CKEditor is using: .cke_editable.



If you change something in wysiwyg-content.scss, make sure you also save the cke__iframe.scss so the CSS is generated.

Using Sass
Flat design
horizontal beam No open issue


No comments yet