24. Mai 2017

Benutzerdefinierte CSS Stile im CKEditor in Drupal 7 mit Wysiwyg

Das CSS Zebra
Das CSS Zebra

In Drupal 7 können einfach eigene CSS Klassen festgelegt werden. Die eigenen Styles lassen sich beim Schreiben im Editor im Drop-down-Menü auswählen. Es ist ein kleines, nützliches Feature, das viel Zeit spart. Hier ein Tutorial mit dem Wysiwyg Modul und den CKEditor Libraries. Damit können die CSS Stile aus dem eigenen Stylesheet schnell und einfach beim Arbeiten mit dem Editor angewendet werden.

Installation der Module

Wenn noch nicht geschehen, werden zuerst das Wysiwyg Modul, und für die Bilder Integration auch das Modul IMCE, und das Modul IMCE Wysiwyg bridge heruntergeladen und nach /sites/all/modules entpackt. Dann die Javascript Dateien des CKEditor herunterladen - das Standard Package genügt -, und nach /sites/all/libraries entpacken. Dabei muss darauf geachtet werden, dass die Version des CKEditor vom Wysiwyg Modul unterstützt wird. Danach werden die Module installiert.

CKEditor Profil

Unter KonfigurationInhaltserstellungWysiwyg Profiles ein Profil erstellen. Beispielhaft wird hier ein "Full HTML" Profil erstellt.

CKeditor: Profil erstellen mit dem Drupal 7 Modul Wysiwyg
Bei der Auswahl der CKEditor Libraries auf der Downloadseite muss darauf geachtet werden, dass die Version von dem Wysiwyg Modul unterstützt wird. Hier wird ein "Full HTML" Profil erstellt, es gibt also keine Restriktionen.

 

Unter "Editor" den CKEditor auswählen. Profil erstellen, und gewünschte Buttons und Plugins anklicken. Im Reiter "CSS" werden die Klassen und Elemente eingetragen.

Soll die CSS im CKEditor angezeigt werden, kann auch unter "CSS Editor" "Use theme CSS" ausgewählt werden.

Einige CSS Selektoren, wie h1-h6 sind bereits vorhanden. Andere können frei definiert werden, zum Beispiel Klassen oder reine Blockelemente.

Benutzerdefinierte CSS Klassen

Unter dem Abschnitt "CSS classes" können nun die eigenen CSS Klassen eingetragen werden. Die Syntax ist [label]=[element].[class].

Dabei ist [label] eine frei wählbare Bezeichnung; [element] das HTML Element, und [class] der CSS Klassen-Selektor.

Im Stylesheet befindet sich z.B. die Klasse .blau:

.blau {fontsize: 0.9em; color: blue;}

Der Eintrag bei "CSS classes" wäre dann:

Blaue Schrift=p.blau

Wird nun ein Inhalt erstellt, kann der gewünschte Bereich markiert werden, und im Dropdown Menü des CKEditors kann die CSS unter "Stil" ausgewählt werden.

HTML Blockelemente

Ebenfalls können sich unter dem Reiter "Block Formats" weitere Elemente hinzufügen lassen, wie blockquote, und code. Diese können dann unter "CSS classes" mit benutzerdefinierten CSS Klassen versehen werden. Auch ohne eigene Klassen werden die Elemente gezeigt, wie sie im eigenen Stylesheet definiert sind, z.B.:

code {font-family: monospace, background-color: #ccc;}

Unter dem Abschnitt "Block formats" können die HTML Elemente eingetragen werden. Die einzelnen Elemente werden durch Komma, aber ohne Leerzeichen getrennt.

Wie oben wird bei der Inhaltserstellung dann ein Bereich markiert, und das Blockelement im Drop-down Menü unter "Normal" oder "Format" ausgewählt.

Hier ein paar Beispiele, die in einem Stylesheet stehen könnten:

ul.info {list-style-type: square;}

h2.sidebar {font-size: 1.2em;}

.green {color: #008000;}

Im Wysiwyg Profil wird dann folgendes eingetragen:

Info Liste=ul.info

Sidebar Titel (H2)=h2.sidebar

Grüner Span Tag=span.green
Eigene CSS Klassen und HTML Blockelemente im CKEditor Profil
Die eigenen CSS Klassen können komfortabel in der Wysiwyg Modul Konfiguration im CKEditor Profil eingetrage werden. Unter Blockformate lassen sich allgemeine HTML Elemente eintragen. Sie können auch, mit einer eigenen CSS Klasse versehen, ober unter "CSS classes" eingetragen werden.

 

Einmal eingerichtet, ist also die Anwendung denkbar einfach. Bei Listen-HTML Elementen wie ul und ol müssen aber zuerst die Listenpunkte markiert werden, und dann auf den Button "Liste" oder "Nummerierte Liste" geklickt werden Danach ist eine zuvor definierte ul- oder ol-Klasse im "Stil"-Menü auswählbar. Die Blockelemente lassen sich unter "Format" auswählen.

Der Quellcode sähe hier so aus:

<p class="blue">Hier ein <span class="green">Testartikel</span> mit einer Liste:</p><ul class="info"><li>Unterpunkt eins</li><li>Unterpunkt zwei</li><li>Unterpunkt drei</li></ul>

CSS Klassen erscheinene beim Schreiben des Artikels im CKEditor
Bei der Inhaltserstellung wird im Editor das zuvor erstellte "Full HTML" Profil ausgewählt. CSS Klassen erscheinen unter "Stil", Blockelemente unter "Format".

 

Es lohnt sich also, einmal die eigenen CSS Stile für die Arbeit im Editor zu definieren. Schließlich werden ja meist immer wieder dieselben Styles genutzt. Auch lassen sich schnell eine größere Menge an CSS Klassen integrieren. Aber mit wenigen Klassen ist das Schreiben im Editor ebenfalls viel einfacher, als wenn jedes mal eine individueller Style im Quellcode eingegeben werden müsste.

Neuen Kommentar schreiben

You must have Javascript enabled to use this form.