So geht’s: Individuelle CSS-Datei für CKEditor (Gambio Shop)

Stylesheet-Datei für Gambio-Editor ändern

So geht’s: Individuelle CSS-Datei für CK-Editor (z.B. bei Gambio-Shop).

Nicht selten kommt es vor, dass für die Bearbeitung von Seiteninhalten über das CMS oder das Shopsystem ein WYSIWYG-Editor wie z.B. CKEditor oder TinyMCE verwendet wird.

Sollte die Website nun ein spezielleres Design verwenden, ist Bearbeitung über den Editor nicht mehr ganz so einfach, weil der Editor die jeweiligen Stylesheet-Klassen nicht kennt und daher alle Inhalte im Standardformat wiedergibt. Spezielle Formatierungen wie z.B. Schriftgrößen oder DIV-Klassen werden dann nicht wie auf der Website bzw. dem Shop angezeigt. Dies erschwert die Bearbeitung von Inhalten deutlich, da die Inhalte im Editor anders aussehen, als auf der eigentlichen Website.

Anhand der Kombination Gambio-Shop und CKEditor zeigen wir Ihnen, wie Sie dem Editor ein eigenes Stylesheet zuweisen:

1. Die Datei admin/includes/ckeditor/config.js öffnen
2. Im letzte Abschnitt (dort, wo config.enterMode = CKEDITOR.ENTER_BR; steht) fügen wir an letzter Stelle folgende Zeilen hinzu:
   config.extraPlugins = 'stylesheetparser';
   config.contentsCss = 'admin/includes/ckeditor/custom.css';
3. Nun benötigen wir noch das Plugin „stylesheetparser“, welches hier heruntergeladen werden kann.
4. In der Zip-Datei ist das Verzeichnis „stylesheetparser“ enthalten. Dieses Verzeichnis sowie alle darin enthaltenen Dateien übertragen wir per FTP in das Verzeichnis „admin/includes/ckeditor/plugins“.
5. Nun erstellen Sie eine Datei namens „custom.css“ und tragen dort Ihre Style-Definitionen ein.
6. Wenn Sie wollen, können Sie in diese Datei auch zusätzlich die Standard-Definitionen vom Gambio-Shop eintragen, da die Standard-Definitionen nun nicht mehr angezeigt werden. Die Standard-CSS-Datei ist die „content.css“ (ebenfalls im ckeditor-Verzeichnis)
7. Laden Sie die „custom.css“ in den Ordner admin/includes/ckeditor/ hoch.

Es ist nun ratsam, sich aus der Gambio-Admin-Oberfläche auszuloggen und den Browsercache zu leeren. Sollte die Darstellung des Editors immer noch nicht korrekt sein, kann die Leerung des Shop-Caches hilfreich sein.

Das Signalstark-Team wünscht fröhliches Editieren!

Haben Sie zu diesem Thema Fragen? Gerne stehen wir Ihnen als Berater oder zur technischen Unterstützung zur Verfügung. Melden Sie sich mit Ihrem Anliegen bei uns: Kontakt.