Contao-News
Wir informieren Dich hier regelmäßig zu Updates, stellen Best-Practice-Arbeiten vor und berichten über Aktuelles aus dem Contaoversum.
Wie man die basic.css für den Rich Text Editor einsetzt
– Aus der Praxis
Ab der Version 2.9 wird die basic.css von der tinymce.css ersetzt. Die tinymce.css wird zudem nicht im Stylesheet-Generator verwaltet, sondern liegt direkt im Ordner tl_files und wird von Contao eigenständig in das Seitenlayout eingebunden, sofern man es nicht explizit anders im Seitenlayout einstellt. Alle anderen Informationen in diesem Blogbeitrag können weiterhin wie gehabt genutzt werden.
Diesmal habe ich nur einen kleinen Trick für euch, den aktive Nutzer aus dem Forum wahrscheinlich schon kennen (weil ich ihn dort immer wieder erklären muss *lach*).
Wenn man im TYPOlight Stylesheet-Generator eine CSS-Datei namens basic.css anlegt, greift der Rich Text Editor (TinyMCE) automatisch darauf zu. Ich binde die basic.css meistens auch gleich ins Seitenlayout ein, damit die darin hinterlegten Anweisungen sich neben dem Editor auch für die Webseite auswirken. Das erleichtert die Arbeit der Redakteure sehr, da sie im TYPOlight-Backend im Editor (fast) das gleiche sehen, wie im Frontend der Webseite.
Man muss dabei aber bedenken, dass der Editor nur sehr rudimentäre Anweisungen versteht. Ich schreibe deshalb in die basic.css nur die wichtigsten Basis-Anweisungen:
- Grundlegende Definitionen für die üblichen Elemente (Bild, Liste, Absatz, Überschrift, …)
- Allgemeine Klassen
- Sonderanweisungen die nur für den Editor gelten sollen
Beispiel für eine basic.css
Die basic.css könnte wie nachfolgend beschrieben aussehen. Ich habe darin Elemente aus dem Reset von Eric Meyer, dem Setting von Thierry Koblentz und meinen eigenen Erfahrungen eingebaut. Außerdem habe ich darauf Rücksicht genommen, dass mit dem Framework normalerweise automatisch die typolight.css zuvor eingebunden wird und ich somit einige Angaben nicht mehr machen muss.
html { height: 100%; overflow-y: scroll; margin: 0; padding: 0; }
body { height: 100%; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; line-height: 1.5; }
h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,table,caption,thead,tbody,tfoot,tr,th,td,blockquote,pre,code,form,fieldset,legend,input,button,textarea,select { margin: 0; padding: 0; }
ol,ul { margin-bottom:1.5em; }
li { margin-left:1.5em; }
pre,code { font-family: 'Lucida Console', Monaco, monospace; }
p,pre,blockquote,table,form { margin-bottom:1.5em; }
legend {padding-bottom: .5em; }
hr { border-style: inset; border-width: 1px; }
h1 { margin-bottom: 0.8em; font-weight:bold; font-size: 140%; color: #004C80; }
h2 { margin-bottom: 0.5em; font-weight:bold; font-size: 120%; color:#000; }
h3,h4,h5,h6 { margin-bottom: 0.2em; font-weight:bold; font-size:110%; color:#000; }
table { border:1px solid #666; border-collapse:collapse; border-spacing:0; }
th { background-color:#ededed; text-align: center; vertical-align:top; padding:2px; }
td { text-align:left; vertical-align:top; padding:2px; }
sup { vertical-align:text-top; font-size: 85%; }
sub { vertical-align:text-bottom; font-size: 85%; }
del { text-decoration:line-through; }
ins { text-decoration:none; }
em { font-style: italic; }
strong { font-weight: bold; }
small { font-size: 85%; }
img {vertical-align: bottom;}
blockquote, q, em, cite, dfn, i, var { font-style: italic; }
abbr,acronym { border-bottom: 1px dotted #666; font-variant:normal; cursor:help; }
a:link,a:visited { text-decoration: underline; color:#004C80; }
a:hover,a:focus,a:active { text-decoration:none; color:#000; }
:focus {outline: 1px dotted #000;}
.teaser { background-color: #ccc; padding: 5px; }
body#tinymce { background-color:#fff; color:#333; font-size:14px;}Weiteres Vorgehen
Sobald die basic.css mit diesem Inhalt im Stylesheet-Generator von TYPOlight angelegt wurde, loggt ihr euch am besten kurz aus dem Backend aus und löscht euren Browser-Cache. Dadurch stellt ihr sicher, dass der Editor die neuen Anweisungen lädt.
Wenn ihr euch nun den Editor anseht, findet ihr im Format-Drop-Down die teaser-Klasse aus dem Beispiel und könnt diese auf beliebige Elemente anwenden. Natürlich könnt ihr auch noch weitere Klassen erstellen. Bedenkt dabei aber immer, dass der Editor nur einfache CSS-Selektoren versteht und zu komplex verschachtelte Selektoren einfach ignoriert.
Anweisungen nur für den Editor (TinyMCE) festlegen
In der letzten Zeile meines Beispiels seht ihr eine Anweisung die durch das Voranstellen der ID #tinymce explizit für den Editor geschrieben wurde. Wenn ihr also auf eurer Webseite z.B. eine dunkle Body-Hintergrundfarbe definiert habt, könnt ihr das im Editor auf diese Art angeben, damit die Redakteure ihren Text weiterhin schön schwarz auf weiß schreiben können. Es ist auch schon öfter vorgekommen, dass Nutzer auf der Webseite für Listen die Listenpunkte entfernen, aber diese im Editor schon anzeigen lassen wollen. Das könntet ihr dann in der basic.css einfach so machen:
#tinymce ul { list-style-type: disc; }
Kommentare
Kommentar von jachen carl |
Herzlichen Dank für dieses kleine TinyMCE-Tutorial.
Gewisse Autoren verwenden für relative font-sizes em, andere %. Was spricht für das eine oder andere?
ciao
jachen
Anmerkung von Nina:
Es hängt eigentlich nur davon ab, womit du lieber arbeitest. Richtig oder falsch gibt es dabei nicht.
Kommentar von choise |
#tinymce { background-color:#000; }
funktioniert zb leider nicht.
#tinymce { background-color:#000 !important; }
schafft da abhilfe. nicht unbedingt schön, aber für das backend durchaus ausreichend.
Anmerkung von Nina:
Ich hatte deshalb auch body#tinymce im Beispiel geschrieben, damit es die normale Body-Anweisung überschreibt. Dann braucht man nichtmal ein !important
Kommentar von Peter Müller |
Erstmal vielen Dank an Nina für die basic.css. Da sind viele gute Ideen drin.
Kurze Anmerkung noch zu Ninas Anmerkung:
Das !important hinter "background-color" ist doch nötig, weil die system/themes/tinymce.css vorher geladen wird und dort wurde die Hintergrundfarbe für den body mit !important definiert. Da kann man mit Erhöhung der Spezifität wie body#tinymce nicht gegen an, weil !important in der Kaskade vor der Spezifität ausgewertet wird ;)
Bei den anderen Eigenschaften wie "color" und "font-size" ist !important nicht nötig, weil die in tinyMCE.css nicht oder zumindest nicht mit !important definiert wurden.
Kommentar von Philipp |
Gilt das in Contao >2.9.0 eigentlich auch noch?
Anmerkung von Nina:
Siehe die Notiz am Anfang des Guides. Die basic.css gibt es seit der 2.9 nicht mehr. Stattdessen gibt es im Ordner tl_files die Datei tinymce.css die dort übergreifend für den TinyMCE in dieser Contao-Installation gilt. Du kannst die oben vorgestellten Inhalte einfach in diese tinymce.css kopieren. Melde dich danach am besten von Contao ab, leere den Browser-Cache und melde dich wieder an. Dann sollten die Einstellungen greifen. In den Seitenlayouts kannst du wählen, ob sich die tinymce.css auf das Layout auswirken soll oder nicht.
Einen Kommentar schreiben