Some way to output config CSS to frontend

[foxtrotcz]

Currently you can configure styles (classes) and CSS in backend config.
This allows you to style anything in CKEditor.

But only classes are outputted to frontend. Not CSS.

So take for example the image in this repo.

You define new style called Category which targets h3 and has class "category". You also create CSS for it as in the image. You apply style category to some heading in CKEditor. In backend it will all look good. Class and CSS acting as it should and styling content.

On frontend you will have only class output <h3 class="category">. No CSS. And since CSS isn't outputted into frontend the styling doesnt work. You would have to manually copy all the styles you already configured in backend into template for it to work in frontend.

Manually copying styles every time you change them is not very good.
And I presume when you style content in backend CKEditor you also want it to look the same in frontend.

So I though that the defined CSS in backend should have some way to be outputted to frontend.

I found something here, but I dont understand it. #29 (comment)
So the styles should be registered for frontend already and work out of the box? It doesnt work for me.
Or do I need to import them? Is the refered cke-styles.css auto-created or manually created?

Thanks.

[foxtrotcz]

Ok, after little trying and reading #29 (comment) I found a way.
Instead of outputting CSS from backend to frontend it gets defined in frontend and imported to backend.

1. Create you own css file in frontend folder. For example ckeditor.css
2. In this file add all your css that will be used on frontend and backend CKEditor. The same you would add in Custom Styles field. For example:

.ck.ck-content p.note { border-left: 4px solid #4a7cf6; padding-left: 1rem; color: #4a7cf6; }

3. Add this file into your frontend template. <link rel="stylesheet" href="/css/ckeditor.css" />
4. Add this file into CKEditor Custom Styles config by @import. For example @import "/css/ckeditor.css"
5. Dont forget to define the style in CKEditor config so you can use it in editor:
   style: {
   definitions: [
   {
   name: 'Note',
   element: 'p',
   classes: ['note']
   },
6. Dont forget that .ck.ck-content p.note will only work in frontend if parent element has ck ck-content classes.

Well, I think this should be documented somewhere better.

[AugustMiller]

It is technically possible to output the CSS from the CKEditor config used in a field, but as you've noted, it can easily conflict with other fields, or your global CSS.

Assuming you have CSS like this in your configuration…

p {
  border: 3px solid red;
}

…you can output it alongside a field, like this:

{# Output CKEditor field value: #}
{{ entry.richText }}

{# Load field definition: #}
{% set field = craft.app.fields.getFieldByHandle('richText') %}

{# Get the corresponding `CkeConfig` object:
{% set config = craft.app.plugins.getPlugin('ckeditor').getCkeConfigs().getByUid(field.ckeConfig) %}

{# Register CSS content for output: #}
{% do view.registerCss(config.css) %}

However, this will expose the p rule to the entire page. To scope this to a single instance in your template, wrap it in a qualifying class, like .ck:

.ck p {
  border: 3px solid red;
}

Then, use the namespace tag around both the HTML output and the style tag to ensure both are namespaced properly:

{# Same config getter logic: #}
{% set configUid = craft.app.fields.getFieldByHandle('richText').ckeConfig %}
{% set config = craft.app.plugins.getPlugin('ckeditor').getCkeConfigs().getByUid(configUid) %}

{# Define a namespace `rich-text` for this field’s output: #}
{% namespace 'rich-text' withClasses %}
    {# Wrap output in the same class we used to scope the config CSS: #}
    <div class="ck">
        {{ entry.richText }}
    </div>

    {# Echo styles into a tag so the namespacer can find them: #}
    <style>{{ config.css }}</style>
{% endnamespace %}