J5.x:Hinzufügen eines Klassenselektors zum Dialog Link erstellen
From Joomla! Documentation
Beschreibung
Dieses Feature ermöglicht es Benutzern, CSS-Klassen zu Links direkt im tinyMCE Editor hinzuzufügen. Ob nun bestimmte Stile angewendet oder Links in interaktive Elemente wie Schaltflächen verwandelt werden sollen, diese Option vereinfacht den Prozess der Anpassung von Links in den Beiträgen erheblich. Sie macht die manuelle Bearbeitung des Quellcodes überflüssig und ermöglicht es den Nutzern, schnell vordefinierte Stile anzuwenden oder erweiterte visuelle Effekte hinzuzufügen. Die Benutzer können aus einer Reihe von vordefinierten Klassen, wie z. B. denen von Bootstrap, wählen, um das Aussehen und die Interaktion von Links zu verbessern. Auf diese Weise lässt sich die Darstellung von Links verbessern, ohne dass der HTML-Code direkt geändert werden muss.
Link-Styling mit dem Klassen-Selektor verbessern
Ab Joomla 5.2 können jetzt ganz einfach benutzerdefinierte CSS-Klassen zu Links mit Hilfe des tinyMCE-Editors hinzugefügt werden. Diese neue Funktion ermöglicht es, Links zu gestalten, ohne direkt den Quellcode der Beiträge zu bearbeiten. Durch das Hinzufügen von Bootstrap-Klassen kann man zum Beispiel einen Link schnell in einen Button verwandeln oder besondere visuelle Effekte hinzufügen. Die folgende Anleitung hilft, das Beste aus dieser neuen Option herauszuholen.
Schrittweise Einführung in den Klassen-Selektor
- Zugriff auf die tinyMCE-Konfiguration: zur tinyMCE-Editor-Konfiguration gehen und die Registerkarte "Erweitert" öffnen.
- Klassen zum Dropdown hinzufügen: Auf der Registerkarte "Erweitert" kann man die CSS-Klassen hinzufügen, die für das Styling seiner Links verwendet werden sollen. Zum Beispiel Bootstrap-Klassen, um stylische Schaltflächen zu erstellen.
Beispiele für Vorlagen, die Bootstrap nativ verwenden, findet sich in der offiziellen Dokumentation: Bootstrap Dokumentation
Hier ein paar Klassen, die für Bootstrap-Button-Varianten verwendbar sind:
btn btn-primary
für einen Primärbuttonbtn btn-secondary
für einen Zweitbuttonbtn btn-success
für einen Erfolg-Buttonbtn btn-danger
für einen Gefahr-Buttonbtn btn-warning
für einen Warn-Buttonbtn btn-info
für einen Info-Buttonbtn btn-light
für einen hellen Buttonbtn btn-dark
für einen dunklen Buttonbtn btn-link
für einen Link-Button
Schaltflächen-Alternativen: Umriss
Außerdem können die Varianten der Umriss-Schaltflächen verwendet werden:
btn btn-outline-primary
für eine Umriss-Primärbuttonbtn btn-outline-secondary
für einen Umriss-Zweitbutton- … (usw.)
Für die Größe der Buttons, diese Klassen hinzufügen
btn-lg
für einen großen Buttonbtn-sm
für einen kleinen Button
Beispiel:
btn btn-dark btn-lg
(ein großer dunkler Button)
Einen Link in einem Beitrag erstellen
Einen Beitrag öffnen und einen Link erstellen. Am unteren Ende des Dialogfelds zur Erstellung eines Links wird die Option zur Auswahl der konfigurierten Klassen angezeigt.
Fortgeschrittene Verwendung: Anwenden benutzerdefinierter Klassen
Diese Funktion ist nicht auf Bootstrap-Klassen beschränkt. Es können eigene benutzerdefinierte CSS-Klassen für bestimmte Anforderungen eingesetzt werden. Zum Beispiel kann ein Symbol vor dem Link mit einem Hover-Effekt eingefügt werden. Auf diese Weise lassen sich Links ganz einfach gestalten, ohne dass der Quellcode des Beitrags geändert werden muss.
Anmerkung zum Ursprung der Funktion
Diese Funktion wurde in Joomla 5.2 mit dem PR #43260 hinzugefügt.