TYPO3 RTE parseFunc to customize links.

Here I had a requirement to add a button style to RTE link. By adding the link class, I was able to add some class to link and able to generate the links like below.

<a herf=”#” class=”btn”>My link</a>

But according the my designer, the link should have a <span> tag inside the <a> tag. It should look like below.

<a herf=”#” class=”btn”><span>My link</span></a>

So, I have used a RTE parseFunc to do this.

Below are the steps.

1. Add the below typoscript in TS template setup.

includeLibs.userFunc= EXT:mycustom_config/Classes/UserFunction/Addspan.php
tt_content.text.20.parseFunc.tags.link {
postUserFunc= user_addSpan->addSpan
class = btn
ATagTitle.field = title

If we use namespaces, we no need to include the php file by using “includeLibs”. In that case, we can call the userfunction directly like below

postUserFunc= Namespace\Myext\UserFunctions\Addspan->addSpan

2.  On file Addspan.php we need to add below code.

class user_addSpan{
* Adds span inside <a> tag, if the link class ‘btn’ is selected
function addSpan($content,$conf) {
$class = $conf[‘class’];
if (preg_match(‘/class\=”(.*’. $class .’.*)”/i’, $content, $res)) {
$content = preg_replace(‘@>(.*)</a>@i’, ‘><span>$1</span></a>’, $content);
return $content;

In this php function, I am checking for link class “btn” and adding a <span> tag.

That’s it. We can use this technique for generating Record links too, In that case we can generate the typolink to record detail view and replace “href”.


How to enable click enlarge image in Typo3 RTE ?

1) Go to the extension manager and click on the extension “htmlArea RTE” and there check “Enable images in the RTE[enableImages]”.  After that click on “Update” on the bottom.

2) Include the static template “Clickenlarge Rendering (rtehtmlarea) “.

include static template

3) Insert the image in RTE and set on “Click-enlarge” option.