Hinzufügen einer CSS-Class im Typo3 LinkBrowser

Der CKEditor ( RTE = Rich Text Editor ) bietet als WISIWYG editor zahlreiche Möglichkeiten Richt Rext Felder zu bearbeiten. Bei Rich Text Feldern handelt es sich unter Anderem um Text, der mit markup z.B.  durch Style-Vorgaben wie"bold" oder Links, erweitert wird.

1. Ziel: Hinzufügen einer weiteren CSS-Class im LinkBrowser

In Typo3 können einem Link die Style Vorgaben über den LinkBrowser hinzugefügt werden. Im Screenshot ist der LinkBrowser mit den Tabs der Link Typen "Page", "File", "Folder", "External URL", "Email" und "Telephone" zu sehen. Ausgewählt ist der Tab "Telephone". Im Dropdown Menü der CSS-Class lassen sich jetzt entweder keine Classe, die Class "link-arrow" oder aber "link-phone" auswählen. 

Beispiel für "link-phone":

<a class="link-phone" href="tel:+492112054360">+49 211 205436-0</a>

2. Erweiterung der Core Einstellungen über eine weitere .yaml Datei

Der rte_ckeditor ist über YAML Dateien individuell konfigurierbar.

Die Bootstrap Extension des Official Introduction Packets erweitert die Core-Einstellungen des CKEditors noch um eine Default.yaml Datei.
Diese wird der ypo3 Installation über die ext_localconf.php Datei hinzugefügt.

typo3conf/ext/bootstrap_package/ext_localconf.php

3. Konfiguration der Default.yaml Datei

Damit die CSS-Classes beim Generieren vom System nicht entfernt werden, müsst ihr diese als "Zugelassen" festlegen. Hier könnt ihr weitere Classes hinzufügen und dann im CKEditor verwenden.

typo3conf/ext/bootstrap_package/RTE/Default.yaml

buttons:
    link:
        properties:
            class:
                allowedClasses: 'link-arrow, link-page, link-folder, link-file, link-external, link-location, link-mail, link-phone'

Über classesAnchor werden die Link-Classes dem LinkBrowser übergeben. Dem ClassAnchor type "telephone", der vom Core her schon angelegt ist, müsst ihr nur noch die gewünschte Class 'link-phone" zuordnen, das wäre Alles.

classesAnchor:
    page:
        class: 'link-page'
        type: 'page'
    folder:
        class: 'link-folder'
        type: 'folder'
    file:
        class: 'link-file'
        type: 'file'
    external:
        class: 'link-external'
        type: 'url'
        target: '_blank'
    externalLocationLink:
        class: 'link-location'
        type: 'url'
        target: '_blank'    
    mail:
        class: 'link-mail'
        type: 'mail'
    telephone: 
        class: 'link-phone'
        type: 'telephone'    

Falls ihr für externe URL's verschiedenen Icons einsetzten möchtet, bracht ihr nur einen weiteren Key für den Type "URL" anlegen. Im Screenshot seht ihr für URL's 2 mögliche Classes: "link-external" und "link-location", die dann unterschiedliche Icons haben können.

4. Stylesheet einrichten für die CSS-Class

Im Bootstrap Package findet ihr die Stylesheetangaben für die Links in der SCSS Datei _link.scss. 

typo3conf/ext/bootstrap_packet/Resources/Public//Scss/Theme/_links.scss