TYPO3 Core

Prerequisites¶

- TYPO3 12.4.18
- CKEditor full preset enabled
- a page with a "Text" Content element

Steps to reproduce¶

- Edit the bodytext of the CE, add some text and use the buttons to create a <mark> tag inside the text (see attached file)
- Visit the page on the frontend

Result¶

the <mark> tag is double-encoded, so on the frontend the HTML code is actually:

lorem <mark class="marker-yellow">ipsum dolor</mark> sit amet 

expected result¶

the <mark> tag should be rendered as an actual HTML tag

Reason¶

That is because <mark> has not been included into lib.parseFunc_RTE.allowTags; as a workaround you
can just add it by yourself in your TypoScript setup:

lib.parseFunc_RTE.allowTags:=addToList(mark)

Bonus¶

As far as I have seen the CKEditor ships some predefined "markers" in the yaml file:

        - { model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow marker', type: 'marker', color: 'var(--ck-highlight-marker-yellow)' }
        - { model: 'greenMarker', class: 'marker-green', title: 'Green marker', type: 'marker', color: 'var(--ck-highlight-marker-green)' }
        - { model: 'redPen', class: 'pen-red', title: 'Red pen', type: 'pen', color: 'var(--ck-highlight-pen-red)' }

but these CSS classes are not defined on the frontend; as a result, even if you choose to use for example the "Green Marker" and correct by yourself lib.parseFunc_RTE.allowTags, the marked words on the frontend would still use the default browser background color for the <mark> tag (yellow for Chrome)

Let me know if you need a separate issue for that (or if you think that the integrators are meant to take care of this)