Wrap H1-H6 Tags with Typo3 ParseFunc depending on the class set in RTE

0
votes

I want to add inline-svgs to my h1 to h6 Tags depending on the class set in the RTE.

Example: RTE: 

<h1 class="icon--clock">Header</h1>

Output: 

<h1 class="icon--clock"><svg>...</svg>Header</h1>

I've done something similar with links before, using the parseFunc Config. A method like this: https://wiki.typo3.org/External_links

Is there any way to access and split the tag and class like the link parameters through TypoScript?

I also tried using a userFunc

lib.parseFunc.userFunc = ...\MyClass->MyUserFunc

but in Params I only get the tag content, not the tag or the classes that have been set themselves.

I'm using Typo8 with the ckeditor, but I don't think that makes a difference.

Can I even do this? How do I do this?

I know that I can alternatively add different header layouts and use the tt_content header field, because it's easier to manipulate the template there. But I'd love to know if there is a way to this in the RTE.

1
typo3typoscripttypo3-8.x

1 Answers

1
votes

I think you could do it in typoscript, but that would be very complicated as you need to analyze the attributes of the Hn-tags.

A simpler method which came to mind would be: use CSS and ::before. So you can use a selector to the class to insert the matching SVG.
This also can be done with javascript but as CSS can do it it would be more efficient to use CSS.