Search code examples
ckeditortypo3yamltypo3-8.x

TYPO3: CKEditor: Don't shows some classes

I have a yaml-configuration for own classes in the ckeditor:

  - { name: "Subline", element: "p", attributes: { class: "subline" } }
  - { name: "Intro", element: "p", attributes: { class: "lead" } }
  - { name: "Farbwelt-Text", element: "p", attributes: { class: "text-farbwelt" } }
  - { name: "small", element: "p", attributes: { class: "small" } }
  - { name: "Style: h1", element: "p", attributes: { class: "h1" } }
  - { name: "Style: h2", element: "p", attributes: { class: "h2" } }
  - { name: "Style: h3", element: "p", attributes: { class: "h3" } }
  - { name: "Style: h4", element: "p", attributes: { class: "h4" } }
  - { name: "Style: h5", element: "p", attributes: { class: "h5" } }
  - { name: "Farbformatierung", element: "p", attributes: { class: "wie-color" } }
  - { name: "Farbe: Afrika", element: "p", attributes: { class: "afrika" } }
  - { name: "Farbe: Europa", element: "p", attributes: { class: "europa" } }
  - { name: "Farbe: Asien", element: "p", attributes: { class: "asien" } }
  - { name: "Farbe: Orient", element: "p", attributes: { class: "orient" } }
  - { name: "Farbe: Lateinamerika", element: "p", attributes: { class: "lateinamerika" } }
  # Inline styles
  - { name: "Telefon-Icon", element: "span", attributes: { class: "telefon" } }
  - { name: "Button (orange)", element: "a", attributes: { class: "btn btn-wie-default" } }
  - { name: "Button (orange) small", element: "a", attributes: { class: "btn btn-wie-default btn-sm" } }
  - { name: "Button (orange) small + Pfeil", element: "a", attributes: { class: "btn btn-wie-default btn-sm btn-pfeil" } }
  - { name: "Button (grau) small + Outline + Pfeil", element: "a", attributes: { class: "btn btn-sm btn-outline-secondary btn-pfeil" } }
  - { name: "E-Mail-Icon", element: "a", attributes: { class: "email" } }
  - { name: "Link-Icon", element: "a", attributes: { class: "link" } }

Everything works fine, except these styles:

  - { name: "Button (orange)", element: "a", attributes: { class: "btn btn-wie-default" } }
  - { name: "Button (orange) small", element: "a", attributes: { class: "btn btn-wie-default btn-sm" } }
  - { name: "Button (orange) small + Pfeil", element: "a", attributes: { class: "btn btn-wie-default btn-sm btn-pfeil" } }
  - { name: "Button (grau) small + Outline + Pfeil", element: "a", attributes: { class: "btn btn-sm btn-outline-secondary btn-pfeil" } }

Missing Styles

In the editor only the first element is shown. If I change the second element like this:

- { name: "Button (orange) small", element: "a", attributes: { class: "btn btn-sm btn-wie-default" } }

Then the first and second entry is shown.

enter image description here

When I shuffle the classes of the other two missing styles too, the third style appears, but not the fourth.

Any ideas, what to do?

Solution

  • It's a bug in ckeditor. The classes need to be in alphabetical order. See https://dev.ckeditor.com/ticket/13206 and https://github.com/ckeditor/ckeditor-dev/issues/2578