TYPO3 Core

I would like to assign CSS classes to tags in CKEditor (h1 should have the class .c-rte__h1, h2 should have .c-rte__h2 and so on). This can be done with fixAttrib:class:default: (see snippet below).

The problem occurs when switching between the paragraph style (e.g. from h1 to h2 -> see attached video). Only the tag gets updated, the class will stay the same (<h2 class=“c-rte__h1”>).

editor:

  config:
    stylesSet:
      # Inline styles
      - { name: 'Normal text', element: 'p', attributes: { 'class': 'c-rte__text' }}
      - { name: 'Intro text', element: 'p', attributes: { 'class': 'c-rte__text c-rte__text--intro' }}
      - { name: 'Small text', element: 'p', attributes: { 'class': 'c-rte__text c-rte__text--small' }}

    format_tags: "p;h1;h2;h3;h4;h5" 

processing:

  # Set classes for RTE elements
  entryHTMLparser_db:
    tags:
      br:
        fixAttrib:
          class:
            default: c-rte__br
      h1:
        fixAttrib:
          class:
            default: u-h1 c-rte__h1
      h2:
        fixAttrib:
          class:
            default: u-h2 c-rte__h2
      p:
        fixAttrib:
          class:
            default: c-rte__text
…

(An alternative method would be fixAttrib:class:set, but it overrides the classes assigned with stlyesSet.)