J5.x

J5.x:Hinzufügen eines Klassenselektors zum Dialog Link erstellen

From Joomla! Documentation

This page is a translated version of the page J5.x:Add a class selector to the create link dialog and the translation is 100% complete.
Other languages:
Deutsch • ‎English • ‎français
Joomla! 
5.x
Serie

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

  1. Zugriff auf die tinyMCE-Konfiguration: zur tinyMCE-Editor-Konfiguration gehen und die Registerkarte "Erweitert" öffnen.
  2. 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.
J5x-Adv Tab Tinymce-en.jpg
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ärbutton
  • btn btn-secondary für einen Zweitbutton
  • btn btn-success für einen Erfolg-Button
  • btn btn-danger für einen Gefahr-Button
  • btn btn-warning für einen Warn-Button
  • btn btn-info für einen Info-Button
  • btn btn-light für einen hellen Button
  • btn btn-dark für einen dunklen Button
  • btn 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ärbutton
  • btn 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 Button
  • btn-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.

J5x-edit-link-en.jpg

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.