share

TYPO3: eigene Klassen für Links definieren

Wenn man über den RichTextEditor (RTE) Links auf andere Seiten setzt, stehen einem die Standard-Klassen „external-link„, „external-link-new-window„, „internal-link„, „internal-link-new-window„, „download“ und „mail“ zur Verfügung.

Aber der RTE wäre kein Teil von TYPO3, wenn man ihn nicht einfach über ein paar Zeilen TypoScript ergänzen könnte. Wie immer ist nur die Frage wo und welche Zeilen das sind.

Da die Links über den RTE gesetzt werden, wird die Ergänzung normalerweise im TypoScript-Feld der Seite angelegt (im Normalfall der der Rootseite). Wir rufen also die Seiteneigenschaften unser Wurzelseite auf und gehen zum Reiter „Optionen“. Dort schreiben wir die Konfiguration ins Feld „TSconfig“.

Definieren wir als erstes die Klasse für den entsprechenden Reiter (in diesem Falls für Links auf andere Seiten).
RTE.classesAnchor {
  ourLink {
    class = ourLink
    type = page
    ### möglich auch "file", "mail" oder "url"
    image >
  }
}

Im zweiten Abschnitt fügen wir unsere Klasse „ourLink“ den allgemein erlaubten Klassen und den Klassen für Links hinzu. Zum Schluss definieren wir dann noch die Standardauswahl um den Redakteuren ggf. einen Klick zu ersparen.

RTE.default {
  proc {
    allowedClasses (
      external-link, external-link-new-window, internal-link,
      internal-link-new-window, download, mail, ourLink
    )
  }
  classesAnchor (
    external-link, external-link-new-window,
    internal-link, internal-link-new-window, download, mail,
    ourLink
  )
  classesAnchor.default {
    page = ourLink
    url = external-link-new-window
    file = download
    mail = mail
  }
}

Jetzt können wir Links unsere neue Klasse hinzufügen und diese per CSS stylen.

Joscha Krug ist Gründer und Geschäftsführer der marmalade GmbH aus Magdeburg. Mit seinem stetig wachsenden Team realisiert er schon seit 2009 E-Commerce Projekte mit OXID eShop und Shopware. Er ist Autor der beiden OXID Bücher, erschienen bei o'Reilly.

7 Kommentare zu:

TYPO3: eigene Klassen für Links definieren

  • Wolfgang Wagner

    Hi,

    danke für diese endlich mal einfache und klare Anleitung, danach habe ich eine Weile gesucht!

    Vielleicht kannst du auch eine Anleitung zeigen, wie man eigene Inline-Elemente erzeugen kann? Das wäre das i-Tüpfelchen 🙂

    Grüße vom Bodensee
    Wolfgang Wagner

  • Joscha Krug

    Hallo Wolfgang,

    was meinst du mit inline-Elementen? Da ich am Anfang auch immer wieder am RTE verzweifelt bin, wollte ich eine kleine Serie daraus machen. Also immer her mit den Wünschen!

    Gruß Joscha

  • Wolfgang Wagner

    Man kann im RTE ja markierten Textstellen bestimmte Styles zuweisen. Das geht auf jeden Fall, wenn man in der Konfig der htmlArea von Typical auf Demo umschaltet.

    Aber ich habe es bis jetzt nicht geschafft, dort eigene Klassen einzubauen, die man dann per CSS stylen kann.

  • Joscha Krug

    da ich das ganze gegen später im aktuellen Projekt auch noch umsetzen möchte, werde ich das anschließend gleich hier posten.

    Gruß Joscha

  • Oli

    Hallo Matthias
    Bei mir geht das nicht. Ich habe beide Stück Code in den Seiteneigenschaften ins TS-Config eingefügt. Geht das bei TYPO3 Version 6 auch noch so?

  • Kommentare geschlossen.