Links im CKEditor mit eigenen CSS Klassen

In der Standard Konfiguration des CKEditors von TYPO3 fehlen CSS Klassen und Beziehungen (rel) für die Links. Diese können über PageTS oder yaml gesetzt werden.

Die Konfiguration über PageTS wird bei der Benutzung eigner yaml Konfigurationen entfernt und ich finde das es einfacher ist die Einstellungen nur an einer Stelle (yaml) zu haben. Im Internet sind ein paar Ansätze zu finden, ich habe aber dann doch den BrowseLinksController durchgesehen um zu wissen was geht.

Komplette Konfiguration

mit allen von mir gefundenen Möglichkeiten.

1. Settings und Standardwerte

  • relAttribute schaltet das Beziehungen Feld ein/aus. Das Feld ist nützlich um z.B. als nofollow zu kennzeichnen.
  • targetSelector schaltet das Feld für das Zielfenster (_blank,_top) ein/aus
  • class.allowedClasses was da nicht drin ist gibts nicht
  • title.readOnly wenn dieser Wert auf true steht, können die in der classesAnchor Abteilung gesetzten Titel nicht geändert werden
  • danach werden für die einzelnen Link Typen die Standard Klassen gesetzt
buttons:
  link:
    relAttribute:
      enabled: true
    targetSelector:
      disabled: false
    properties:
      class:
        allowedClasses: 'link-internal,link-internal-blank,link-download,link-folder,link-external,link-external-blank,link-mail'
      title:
        readOnly: false
    page:
      properties:
        class:
          default: 'link-internal'
    file:
      properties:
        class:
          default: 'link-download'
    folder:
      properties:
        class:
          default: 'link-folder'
    url:
      properties:
        class:
          default: 'link-external-blank'
    mail:
      properties:
        class:
          default: 'link-mail'

Konfiguration der einzelnen Link Klassen

Jede Klasse hat einen eigenen Bezeichner der vier Einstellungen haben kann:

  1. class: name der Klasse
  2. type: der Typ des Links für den sie verwendet werden soll
  3. target: das Standard Zielfenster
  4. titleText: defaulwert für den Title der auch übersetzt werden kann
buttons:
  link:
    relAttribute:
      enabled: true
    targetSelector:
      disabled: false
    properties:
      class:
        allowedClasses: 'link-internal,link-internal-blank,link-download,link-folder,link-external,link-external-blank,link-mail'
      title:
        readOnly: false
    page:
      properties:
        class:
          default: 'link-internal'
    file:
      properties:
        class:
          default: 'link-download'
    folder:
      properties:
        class:
          default: 'link-folder'
    url:
      properties:
        class:
          default: 'link-external-blank'
    mail:
      properties:
        class:
          default: 'link-mail'

Aliase für die Klassen

Hier können Beschreibungen für die einzelnen Klassen angegeben werden.

classes:
  link-internal:
    name: 'LLL:EXT:tksite/Resources/Private/Language/locallang.xlf:link_internal_altText'
  link-internal-blank:
    name: 'LLL:EXT:tksite/Resources/Private/Language/locallang.xlf:link_internal_blank_altText'
  link-download:
    name: 'LLL:EXT:tksite/Resources/Private/Language/locallang.xlf:link_download_altText'
  link-folder:
    name: 'LLL:EXT:tksite/Resources/Private/Language/locallang.xlf:link_folder_altText'
  link-external:
    name: 'LLL:EXT:tksite/Resources/Private/Language/locallang.xlf:link_external_altText'
  link-external-blank:
    name: 'LLL:EXT:tksite/Resources/Private/Language/locallang.xlf:link_external_blank_altText'
  link-mail:
    name: 'LLL:EXT:tksite/Resources/Private/Language/locallang.xlf:link_mail_altText'

Angepasste Konfiguration

Hier noch mal eine Konfiguration wie ich sie eher in TYPO3 Projekten einsetzen würde. Verschiedene Einstellungen sind per default schon ok und über immer den selben Linktitel kann man auch geteilter Meinung sein. Dateien zum rauskopieren füge ich am Ende des Artikels noch ein.

#Button config and defaults
buttons:
  link:
    relAttribute:
      enabled: true
    properties:
      class:
        allowedClasses: 'link-internal,link-internal-blank,link-download,link-folder,link-external,link-external-blank,link-mail'
    page:
      properties:
        class:
          default: 'link-internal'
    file:
      properties:
        class:
          default: 'link-download'
    folder:
      properties:
        class:
          default: 'link-folder'
    url:
      properties:
        class:
          default: 'link-external-blank'
    mail:
      properties:
        class:
          default: 'link-mail'

#Classes config
classesAnchor:
  linkInternal:
    class: 'link-internal'
    type: 'page'
  linkInternalBlank:
    class: 'link-internal-blank'
    type: 'page'
    target: '_blank'
  linkDownload:
    class: 'link-download'
    type: 'file'
  linkFolder:
    class: 'link-folder'
    type: 'folder'
  linkExternal:
    class: 'link-external'
    type: 'url'
  linkExternalBlank:
    class: 'link-external-blank'
    type: 'url'
    target: '_blank'
  linkMail:
    class: 'link-mail'
    type: 'mail'
Artikel Suchen