Bug #104617
Updated by Riccardo De Contardi 3 months ago
h3. Prerequisites
- TYPO3 12.4.18
- CKEditor @full@ preset enabled
- a page with a "Text" Content element
h3. 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
h3. Result
the @<mark>@ tag is double-encoded, so on the frontend the HTML code is actually:
<pre>
lorem <mark class="marker-yellow">ipsum dolor</mark> sit amet
</pre>
h3. expected result
the @<mark>@ tag should be rendered as an actual HTML tag
h3. 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:
<pre>
lib.parseFunc_RTE.allowTags:=addToList(mark)
</pre>
h3. Bonus
As far as I have seen the CKEditor ships some predefined "markers" in the yaml file:
<pre>
- { 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)' }
</pre>
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)