How does HTML support for ckeditor 5 need to be configured in TYPO3 12.4.7?

Question

I tried to configure HTML support in TYPO3 12.4.7 according to this documentation, unfortunately without success.

According to this answer it should actually work in version 12.4.7.

EXT:my_sitepackage/Configuration/RTE/MyPreset.yaml

RTE:
  config:
    htmlSupport:
      allow:
        - { name: 'div', attributes: true, classes: true, styles: true }

In rte_ckeditor > Configuration > RTE > Editor > Base.yaml I found this code:

editor:
  config:
    htmlSupport:
      allow:
        # Allow any class or any data attribute in any (configured) tag
        - { classes: true, attributes: { pattern: 'data-.+' } }

But this doesn't seem to work either. When the element is saved, the DIV becomes a P and the attributes are removed. Does anything else need to be configured?

Answer 1

What you did is only configuring the CKEditor interface. I assume that if you add your div and switch to the HTML view of CKEditor, you see the correct HTML code that you want. But when you save the content element to the database, your code is converted. Correct?

What you also need to configure is the RTE transformations for the process of storing and reading RTE content in the database and also the frontend output.

But I assume your major problem is that the TYPO3 RTE wraps all content with a <p> tag and <div> is not allowed inside <p> when you want to have valid HTML.

Answer 2

Its a Bug that we also had to deal with: https://forge.typo3.org/issues/102507

Theres currently a patch under review: https://review.typo3.org/c/Packages/TYPO3.CMS/+/81995

You can copy the Base.yaml from the patch to your template-/provider-extension and include it in your custom ckeditor-config instead of the core Base.yaml until the patch is officially released.