allegro.webdesign

Hinzufügen einer CSS-Class im Typo3 LinkBrowser

#Javascript Alle Artikel #Typo3 #Typo3 Alle Artikel

Das Typo3 Core hat die gängigsten Linktypen "Page", "File", Folder", "External URL", Email" und "Telephone" schon definiert. Wie lassen sich nun CSS-Classes im LinkBrowser hinzufügen?

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

 

Back

Themen