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 compony.info.yml:

# Define the css files that have to theme the wysiwyg in the backend.
ckeditor_stylesheets:
  - 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.

Pitfalls

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

Specifications

Machine name

wysiwyg-content

Perks

Using Sass
Responsive
Accessible

Building blocks

CSS

Inspired by

Flat design

Stats

Public component
102 downloads
No open issue

Contributors