Heading is not properly reloaded

[QLevaslot]

I am saving some content with headings, with such a config:

module.exports = {
  heading: {
    options: [
      { model: "paragraph", title: "Paragraph", class: "ck-heading_paragraph" },
      {
        model: "heading1",
        view: {
          name: "p",
          classes: "title-1",
        },
        title: "Heading 1",
        class: "ck-heading_heading1",
      },
   ], ...
};

When I input content such as:

heading 1

paragraph

It gets saved properly, and when i try to retrieve the text, it shows the following:

<p class=\"title-1\">Header 1</p><p>&nbsp;</p><p>paragraph</p>

However, when i refresh the content page on strapi, the headings are gone from the editor, and I get asked to save the version without any defined heading.

[roslovets]

I believe this issue is outdated.

[MGeuecke]

We had the same issue. Took us some time to solve it. That's why I will summarize it shortly in case someone else stumbles across this too. :) We are using Strapi v4 + strapi-plugin-ckeditor 1.1.2

We defined our custom styles (directly) inside plugin configuration. (For example: view: our-custom-view )
This might work without trouble - but only for specific cases:

1. You rather extend the already existing styling for an element (like you add color but do not try to override font-size for example)
2. You just do not refresh the page/editor 😁

As soon as you are overriding one of the defined styles from ckeditor/admin/src/components/CKEditor/styles.js it will collide and after refreshing the styles are gone - in our case everything was set to be bold, no matter what heading we applied before.

At the time writing in this plugin's documentation there is only explained how to do customize / correctly override the editor styles for Strapi v3. Trying to adapt this to v4 does not work as overriding anything under admin does (currently) not work for Strapi v4:

But we are lucky, they are mentioning the solution. 🥳
So if you need/want to customize ckeditor element's styling you need to adapt it directly inside node_modules and use patch-package to persist the changes.