Eindeutige CSS Klasse für Inhalt, der aus CKEditor kommt
Problem
Ich würde gerne allen <a>
Elementen extra Styling geben. Ich kann zwar im CSS
a {
/* css magick */
}
a:hover {
/* css magick */
}
machen, aber das betrifft alle <a>
Elemente. Menü, Buttons, Mobile Naviation, jegliche <a>
Elemente, die wir in tausenden Controls verwenden (Galerie, Portfolio, etc.). Das kann man im Template nicht managen, und den Styling von `?? in allen Controls zurücksetzen.
Lösung 1
Inhalte, die vom CKEditor kommen, sind in einem div, der extra CSS Klasse hat. Somit muss im Template nur das gemacht werden (ckeditor
Klasse ist nur ein Beispiel):
.ckeditor a {
/* css magick */
}
.ckeditor a:hover {
/* css magick */
}
Problem: jetzt ist schwieriger im CKEditor Template Buttons zu benutzen. Die Regel .ckeditor a
wird jeden .btn-primary
überschreiben. Man kann das umgehen, indem im Template das beachtet wird. Dann muss ich alle Template updaten (machbar).
Lösung 2
Wenn man über den CKEditor Link in den Inhalt einfügt, wird extar CSS Klasse dem <a>
Elementen hinzugefügt. Somit style ich das im Template so:
a.ckeditor-link {
/* css magick */
}
a.ckeditor-link:hover {
/* css magick */
}
Problem: das Problem mit Buttons existiert zwar nicht, aber der Redakteur muss aufpassen, wenn er per Hand den Link erstellt (Quellcode Ansicht).
Ich weiß nicht, welcher Weg ist auf Dauer schöner und besser. Vielleicht hat der @mor eine andere Idee. Das kleine Feature würde jedoch das Mangen von Template Design erleichtern. Somit sind alle Links, die von Editor kommen, egal, ob das Seiteninhalt ist, oder Baustein Inhalt oder Control-Inhalte (Promoslider, Content Swicher, etc.).
Wenn das umgesetzt wird, muss das bitte auch in CKeditor 5 implementiert werden.