TYPO3: RTE Editor Link als Button mit CSS Klasse über Stile (Style)

Do, 27.10.2011 - 16:18 -- Daniel Espendiller

In TYPO3 erstellt man normalerweise Inhalte mit dem RTE Editor im Backend, dieser bietet viele Gestaltungsmöglichkeiten. Auch das setzen der Links mit Stiles geht wunderbar. So gibt es ein extra Dropdown Feld Stile (Style), welche aber doch per Standard erstmal recht mager ausfällt.

Wir können hier neue Auswahlmöglichkeiten über die RTE Config in der TSPage hinzufügen, die dann auch eigene CSS nutzen. Aber die eigentliche HTML Ausgabe kann nicht verändert werden.So ist es nicht sinnvoll möglich diese Links über CSS und ohne Javascript auch in älteren Browser als Button mit Icon zu designen.

Mit ein paar Zeilen Typoscript und PHP kann man das aber wunderbar nachholen:

vorher:
<a class="button default" title="Button Download" href="#">Simple Button</a>
 
nachher:
<a class="button default" title="Button Download" href="#"><span>Simple Button</span></a>

neue Link Stile im RTE Editor hinzufügen

Zum Hinzufügen neuer Stile in der Auswahl kann beispielhaft folgendes Typoscript nutzen. Es muss beachtet werden, dass es unterschiedliche Links Typen gibt. page, mail, url, file sollten wohl für die meisten reichen. Eingefügt muss der Quelltext in die Page TSConfig.

RTE.default {
  classesAnchor:=addToList(button download)
}
 
RTE.classesAnchor {
  page_button_download.class = button download
  page_button_download.type = page
  page_button_download.titleText = Download
 
  mail_button_download.class = button download
  mail_button_download.type = mail
  mail_button_download.titleText = Download
 
  url_button_download.class = button download
  url_button_download.type = url
  url_button_download.titleText = Download
 
  file_button_download.class = button download
  file_button_download.type = file
  file_button_download.titleText = Download
}

HTML Link wrappen

Leider lässt sich hier nicht mit Typoscript arbeiten, da es keine Trennung zwischen normalen Links und RTE Editor Links in Typoscript gibt. Dazu müssen wir uns eine einfache PHP Funktion als userFunc einbinden. Damit nicht alle Links bearbeitet werden übergeben wir gleich ein Parameter class, so dass nur Links mit der Klassen button bearbeitet werden. Umgebaut wird der Link dann mit einem einfachen regulärem Ausdruck.

includeLibs.userFunc= fileadmin/userfunc/typolink.php
tt_content.text.20.parseFunc.tags.link {
  postUserFunc= user_userFunc->addSpan
  postUserFunc{
    class = button
    ATagTitle.field = title
  }
}

fileadmin/userfunc/typolink.php

class user_userFunc{
    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;
    }
}