Links im CKEditor mit eigenen CSS Klassen
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:
- class: name der Klasse
- type: der Typ des Links für den sie verwendet werden soll
- target: das Standard Zielfenster
- 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'
| 8495 | TYPO3
