Zum Inhalt

CK-Editor

Der CK-Editor ist ein sogenannter WYSIWYG (What You See Is What You Get)-Editor. Er bietet also eine Vorschaufunktion, die den Inhalt weitestmöglich so anzeigt, wir er auch im Shop selbst dargestellt wird. Er wird hauptsächlich für Artikel- und Kategoriebeschreibungen sowie Contents (Informationsseiten) verwendet.

Auf diese Weise ist es nicht notwendig den HTML-Code direkt einzugeben, der für die Strukturierung des Inhalts notwendig ist.

Hinweis

Der CK-Editor ist eine Komponente eines externen Anbieters und wird daher nur in einfachen Grundzügen beschrieben. Eine ausführliche Dokumentation erhältst du unter http://ckeditor.com/

Funktionsübersicht

Die meisten Funktionen ähneln denen von herkömmlichen Textverarbeitungen, es gibt aber auch speziellere Leistungsmerkmale. Die einzelnen Buttons bedeuten der Reihe nach von links nach rechts sowie von oben nach unten:

  • Quellcode: schaltet zur Quellcode-Ansicht, um den HTML-Code anzuzeigen.
  • Neue Seite: löscht den Inhalt des Editor-Fensters
  • Vorschau: stellt den Inhalt in einem separaten Vorschau-Fenster dar
  • Drucken

  • Ausschneiden
  • Kopieren
  • Einfügen
  • Als Text einfügen: entfernt z.B. Links und Formatierungen
  • Aus MS-Word einfügen: entfernt Word-typischen Code, der Probleme verursachen kann
  • Rückgängig
  • Wiederherstellen

  • Bild: Einbinden eines Bildes, siehe Kapitel Bilder einbinden
  • Tabelle: Tabelle einbinden
  • Horizontale Linie einfügen: Trennlinie
  • Sonderzeichen einfügen/editieren
  • Smiley
  • Seitenumbruch einfügen

  • ZS Google QR-Code picture einfügen

  • Link einfügen/editieren: siehe Kapitel Link einfügen/editieren
  • Link entfernen
  • Anker

  • Suchen
  • Ersetzen
  • Alles auswählen
  • Rechtschreibprüfung während der Texteingabe

  • Über CKEditor

  • Fett
  • Kursiv
  • Unterstrichen
  • Durchgestrichen
  • Tiefgestellt
  • Hochgestellt
  • Formatierung entfernen

  • Textfarbe
  • Hintergrundfarbe

  • Nummerierte Liste
  • Liste
  • Einzug verringern
  • Einzug erhöhen
  • Zitatblock
  • Linksbündig
  • Zentriert
  • Rechtsbündig
  • Blocksatz

  • Format: Formatvorlage, z.B. Überschriften
  • Schriftart
  • Größe

  • Maximieren: Editorfenster maximieren
  • Blöcke anzeigen

Bilder einbinden

Verwende die Schaltfläche mit den Pyramiden (Bild), um ein Bild einzubinden. Es öffnet sich das Fenster Bild-Eigenschaften. Klicke hier auf Server durchsuchen, du erhältst eine Übersicht des Bild-Verzeichnisses auf deinem Server. Je nach Einstellung im Gambio Admin wird entweder der FileManager oder der Responsive FileManager geladen.

Auswahl des Bildes mit dem FileManager

Klicke in der oberen Leiste auf das Pluszeichen, um das Bild auf deinem Rechner auszuwählen. Der Dateiname wird nun neben der Schaltfläche angezeigt. Klicke nun rechts daneben auf Hochladen, um das ausgewählte Bild auf den Server hochzuladen.

Die Datei wird nun in der Liste aufgeführt und kann per Klick ausgewählt werden, klicke hierzu auf Auswählen, es wird nun im Fenster Bild-Eigenschaften in der Vorschau dargestellt. Bestätige die Bildauswahl mit Klick auf OK, nun ist die Grafik im CK-Editor eingebunden.

Auswahl des Bildes mit dem Responsive FileManager

Befindet sich das Bild bereits auf dem Server, kann es direkt ausgewählt werden:

Um das Bild hochzuladen, klicke bitte auf die in der Abbildung rot umrandete Schaltfläche.

Es öffnet sich der Dialog Standard Hochladen. Klicke nun auf die, in der Abbildung gezeigte, grüne Schaltfläche Dateien hinzufügen, um den Dialog zur Auswahl der Datei auf deinem Rechner aufzurufen oder ziehe diese z.B. direkt aus dem Dateiordner deines Rechners in den weißen Bereich.

Ist die Bild-Datei hochgeladen, wird neben der Vorschau ein Häkchen angezeigt.

Die Datei kann nun über einen Mausklick ausgewählt werden.

Soll das Bild mit einem Link versehen werden, so kann dieser direkt über die Bildeigenschaften platziert werden.

Hinterlege hierzu die Linkadresse im Feld URL. Über das Dropdown-Menü Zielseite kannst du z.B. festlegen, ob der Link in einem neuen Fenster bzw. neuem Tab geöffnet werden soll. MIt der Schaltfläche Server durchsuchen kann eine passende Datei ausgewählt werden, wenn sie im Unterordner images deines Shops liegt.

Bilder responsiv machen

Das Honeygrid ist dazu ausgelegt, sich an die Auflösung des jeweilgen Ausgabegeräts (Desktop-Computer, Tablet, Smartphone) anzupassen. Bilder werden jedoch standardmäßig mit einer festen Größe hinterlegt. Damit diese sich ebenfalls anpassen, müssen verschiedene Änderungen im Reiter Erweitert der Bildeigenschaften vorgenommen werden:

Das Feld Stil (rot markiert) enthält im Regelfall feste Größenangaben. Lösche den Inhalt des Felds komplett, um diese zu entfernen. Unter Formatvorlagenklassen (blau markiert) muss folgender Text platziert werden, damit das Bild als responsiv gekennzeichnet wird:

img-responsive

Bestätige die Änderung mit Klick auf OK und speichere den jeweiligen Bereich (Artikel, Kategorie, Content) ab, um diese im Shop zu verwenden.

Hinweis

Bilder nebeneinander anzeigen

Bilder, die die Formatvorlage img-responsive verwenden, werden im Shop in der Regel untereinander angeordnet. Damit responsive Bilder nebeneinander dargestellt werden, kann man auf das Grid-Layout von Bootstrap zurückgreifen, welches im Honeygrid verwendet wird. Hierzu gibt es Beispiele auf den Seiten

https://getbootstrap.com/examples/grid/ (english) bzw. http://holdirbootstrap.de/examples/grid/ (deutsch)

Um einen solchen Beispielcode zu verwenden, rufe zu der betreffenden Seite den Quellcode auf (üblicherweise kann dies über ein Menü des Browsers, das Öffnen des Kontext-Menüs über einen Rechtsklick auf die Seite oder eine Tastenkombination wie z.B. STRG + U erfolgen) und kopiere den gewünschten Code.

Klicke auf die Schaltfläche Quellcode des CK-Editors, um den Code einzufügen. Klicke erneut auf Quellcode, um die Ansicht umzuschalten. Markiere nun den angezeigten Beispieltext und klicke anschließend auf die Schaltfläche Bild, um das Bild and der betreffenden Position des Rasters einzurichten.

Über die Schaltfläche Link einfügen/editieren kann ein Link gesetzt werden. Schreibe hierzu zunächst den Text, welchen du als Link verwenden möchtest. Markiere den Text anschließend und klicke auf den Button mit den Kettengliedern (Link einfügen/editieren). Als Link-Typ ist standardmäßig URL und als Protokoll http:// ausgewählt. Diese Einstellungen können im Normalfall beibehalten werden; wenn dein Shop jedoch vollständig SSL-verschlüsselt ist, sollte als Protokoll stattdessen https:// eingestellt werden.

Kopiere die Adresse, auf die du verlinken möchtest, in das Feld URL. Über den Reiter Zielseite kann optional ausgewählt werden, ob der Link z.B. in einem neuen Fenster geöffnet werden soll. Mit einem Klick auf OK wird der Link angelegt bzw. aktualisiert.

Hinweis

Wenn du Dateien (z.B. PDF-Dokumente) verlinken möchtest, lade bitte die Datei über Server durchsuchen hoch, bzw. wähle sie aus. Gehe hierbei genau so vor, wie für das Hochladen eines Bildes (siehe Kapitel Bilder einbinden). In der Box Link wird nun der Pfad zur Datei angegeben. Wähle für Protkoll den Eintrag <andere> aus, bevor du auf OK klickst.

Es ist auch möglich Bilder mit einem Link zu versehen. Klicke hierzu mit der linken Maustaste auf das Bild und danach auf den Button mit den Kettengliedern (Link einfügen/editieren). Alternativ kannst du auch über einen Rechtsklick auf das Bild die Bildeigenschaften aufrufen und die zugehörige URL direkt im Reiter Link hinterlegen.

Anker

Über die Funktion Anker können im CK-Editor Sprungmarkierungen innerhalb eines Inhalts, wie etwa einer Content-Seite oder Artikelbeschreibung, gesetzt werden. Diese Marken können dann mit Hilfe von Links aufgerufen werden, sodass der Browser selbsttätig zur verlinkten Markierung springt.

Anker setzen

Über die Schaltfläche mit dem Flaggen-Symbol kann ein Anker gesetzt werden. Markiere den Text, zu dem gesprungen werden soll und klicke auf die Flagge um den Anker zu setzen.

Es öffnet sich ein Dialogfenster, in dem du den Namen für den Anker festlegen kannst.

Achtung

Der Name für den Anker muss eindeutig sein, .d.h. er darf nicht an anderer Stelle nochmals verwendet werden.

Gib einen aussagekräftigen Namen ein und bestätige mit Klick auf OK.

Anker bearbeiten

Ein gesetzter Anker kann über einen Rechtsklick auf den Anker und den Eintrag im Kontextmenü bearbeitet werden:

Der Name des Ankers kann nachträglich angepasst werden:

Anker entfernen

Ein gesetzter Anker kann über einen Rechtsklick auf den Anker und den Eintrag im Kontextmenü gelöscht werden:

Anker verlinken

Der Link zu einem Anker kann über die Schaltfläche Link einfügen/editieren festgelegt werden:

Markieren den Text, den du als Link verwenden möchtest und klicke auf die Schaltfläche mit den Kettengliedern.

Wähle im Dialogfenster über das Dropdown Link-Typ den Eintrag Anker in dieser Seite aus. Es werden neue Einstellungen angezeigt:

Der Anker kann nun über das linke Dropdown Nach Ankername ausgewählt werden:

Bestätige mit Klick auf OK um den Link zu setzen:

Ein so gesetzter Link kann nachträglich bearbeitet werden. Klicke hierzu mit der rechten Maustaste auf den jeweiligen Link und wähle aus dem Kontextmenü den Eintrag Link bearbeiten aus:

Es öffnet sich das Menü Link in dem ein anderer Anker ausgewählt werden kann:

Über einen Rechtsklick kann ein gesetzter Anker-Link ebenfalls wieder entfernt werden. Wähle hierzu den Eintrag Link entfernen aus dem Kontextmenü aus: