Editor

plentymarkets » CMS » Webdesign

 

CMS-Editoren

In plentymarkets sind verschiedene Editoren zur Bearbeitung der Inhalte integriert. Mit dem Editor können Sie Texte und z.B. Tabellen in Kategorien direkt bearbeiten oder Formatierungen, wie z.B. Überschriften, Nummerierungen oder Listen anwenden. Sie sehen bei diesem Editor direkt das Ergebnis (WYSIWYG). Sie können die Inhalte bei diesem Editor auch im Quellcode bearbeiten. Alternativ steht der Editor Textfeld, ein HTML-Editor, zur Verfügung, mit dem Sie ausschließlich im HTML-Code arbeiten. Außerdem wurde noch der Syntax-Editor integriert, mit dem die Inhalte strukturiert und übersichtlich als Code angezeigt werden.

Wahl des Editors

Wir empfehlen, sich für eine Editor-Variante zu entscheiden. Bei Wechsel des Editors können andernfalls unerwünschte HTML-Elemente in Ihre Seiten oder z.B. Ihre Artikelbeschreibungen eingefügt werden. Dieser Effekt kann z.B. auftreten, wenn Sie einen Text mit dem Textfeld-Editor eintragen und dann zum Editor wechseln. Wenn Sie ganz sicher gehen wollen, deaktivieren Sie den Editor im Menü Einstellungen » Grundeinstellungen » Editoren

Die Editoren kommen in den folgenden Bereichen zum Einsatz:

  • Artikelbeschreibung
  • Listingbeschreibung
  • Kategorien
  • Newsletter
Editor-Verfügbarkeit

Wenn Sie im Menü Einstellungen » Grundeinstellungen » Editoren für bestimmte Bereiche den Editor deaktiviert haben, steht der Editor im Dropdown-Menü dieser Bereiche nicht zur Auswahl.

Der Editor

In plentymarkets wird der CKEditor, ein weit verbreiteter Webeditor, der auch professionellen Ansprüchen entspricht und vielfältige Funktionalitäten bereitstellt, eingesetzt. Sie können damit Kategorieseiten wie in einem Textverarbeitungsprogramm bearbeiten, auch wenn Sie nicht über Programmier- bzw. HTML-Kenntnisse verfügen. Allerdings sind solche Kenntnisse von Vorteil, da der Editor auch die Bearbeitung des Quelltextes ermöglicht und Sie darin z.B. unklare Formatierungen korrigieren oder Formatierungen einfügen können, die nicht über die Editorfunktionen zur Verfügung stehen.

Bild 1: Benutzeroberfläche des Editor

Allgemeine Informationen zur Erstellung und Konfiguration von Kategorien finden Sie auf der Handbuchseite Kategorien.

HTML-Editor

Mit der Einstellung Textfeld kommt der HTML-Editor zum Einsatz. Damit werden die Inhalte als HTML-Code bzw. CSS-Formatierung angezeigt.

Bild 2: Nur-Text bzw. HTML-Editor Textfeld

Systemvoraussetzungen

Über die korrekte Funktionsweise des Editors und die Verwendung entscheidet nicht so sehr das Betriebssystem, sondern der Webbrowser.

Systemvoraussetzungen

Beachten Sie bezüglich der Systemvorraussetzungen die Angaben auf der Webseite des Editors.

Bedienung

Die nachfolgenden Erläuterungen zeigen nur die wichtigsten Funktionen, die in der Praxis benötigt werden. Viele Funktionen sind zudem aus den einschlägigen Textverarbeitungsprogrammen bekannt und benötigen keine Erläuterung. Die Funktion der Buttons wird übrigens angezeigt, wenn Sie mit dem Mauszeiger darauf zeigen.

Je nach Browser zeigen manche Funktionen unterschiedliche Verhaltensweisen. Es kann auch zu browserspezifischen Einschränkungen oder ungewollten Effekten kommen. So wird z.B. beim Kopieren und Einfügen von Text in manchen Browsern die Formatierung verändert oder unerwünschte Formatierungen werden mit eingefügt. Sie erhalten auf dieser Seite Tipps zum Umgang mit diesen Funktionen.

Funktionsübersicht

Nachfolgend erhalten Sie grundlegende Informationen zu den Funktionen des Editors.

Bild 3: Übersicht über die Funktionen des Editors

Die folgende Tabelle erläutert die Funktionen des Editors im Detail.

Pos. Einstellung Erläuterung
1 Editor Den gewünschten Editor aus dem Dropdown-Menü wählen:
Editor = Der WYSIWYG-Editor CKEditor
Textfeld = HTML-Editor Textarea oder den
Syntax-Editor = Beachten Sie dazu das Kapitel 1 dieser Seite.
2 Format Ein Format für eine Überschrift, den Fließtext etc. wählen durch Setzen des Cursors in eine Zeile und Wahl des gewünschten Formates.
Bei der Strukturierung der Überschriften eine sinnvolle Reihenfolge festlegen, was besonders wichtig ist, wenn eine automatische Nummerierungsfunktion verwendet wird.
Aus Gründen der Übersichtlichkeit für den Fließtext nur mit einer Standard-Schriftgröße arbeiten und Überschriften durch Auswahl der entsprechenden Absatzformatierung (Heading 1-4) formatieren.
3 Schriftschnitt Den Schnitt, die Farbe und die Ausrichtung von Texten oder einzelnen Worten anpassen.
4 Text unformatiert einfügen Über ein Textfenster Texte unformatiert in die Seite einfügen, der sich nach Klick auf den Button öffnet. Text dann bei Bedarf noch anpassen. Nach Klick auf OK wird der Text dann eingefügt.
5 Liste Formatiert einen Text bzw. eine Zeile als Liste, d.h. es wird ein Blickpunkt eingefügt und die Zeile wird eingerückt.
6 Nummerierung Formatiert einen Text bzw. eine Zeile als nummerierte Liste. Die Nummerierung wird automatisch vorgenommen, der Startwert und die Formatierung der Nummerierung kann ggf. auch angepasst werden.
Dazu mit der rechten Maustaste in die betreffende Zeile klicken und dann die Option Nummerierte Listen-Eigenschaften wählen.
7 Einzug Über diese Icons den Einzug eines Abschnitts erhöhen oder verringern.
8 Link einfügen Öffnet das Fenster Link, in das Links eingefügt werden, z.B. eine Template-Funktion (siehe Bild 4) oder eine URL, um damit auf das betreffende Ziel zu verlinken.


Bild 4: Verlinkung per Template-Funktion einfügen

Konfiguration:
Link-Typ = Art der Verlinkung, z.B. URL, die Einstellung wählen Sie z.B. auch für eine Template-Funktion. Ein Beispiel für einen Anker zeigt Pos. 13.
Protokoll = Für die URL einer verschlüsselten Webseite z.B. https:// wählen. Für eine Template-Funktion die Einstellung andere wählen.
URL = Die betreffende URL oder die Template-Funktion eintragen.
Wichtig: Bei Einfügen der URL einer verschlüsselten Webseite sowie der Einstellung https:// für die Option Protocol wird dieser Präfix automatisch aus der URL entfernt.
9 Anker einfügen Im Text einen Anker hinterlegen mit einer Nummer oder einem Namen. Über den Button Link einfügen wird der Anker verlinkt, z.B. in einer Überschrift, um dann von dieser Überschrift zu dem Anker zu springen.


Bild 5: Anker als Verlinkungsziel wählen

Konfiguration:
Link-Typ = Anker in dieser Seite wählen.
Anker auswählen = Den betreffenden Anker entweder nach Name oder nach Id (ID) wählen.
10 Tabelle Fügt eine Tabelle ein. Die Anzahl der Zeilen und Spalten ist wählbar, sowie einige weitere Formatierungen.
Tipp: Alternativ eine Tabelle per HTML-Code im Quellcode bzw. über den Syntax-Editor einfügen.
11 Bild Über dieses Icon werden Bilder wie unten beschrieben konfiguriert und in die Seite eingefügt.
Ein neues Bild einfügen: den Cursor an die betreffende Stelle im Text setzen und auf dieses Icon klicken.
Ein schon bestehendes Bild erneut bearbeiten: erst auf das Bild klicken und dann auf dieses Icon. Alternativ mit der rechten Maustaste auf das Bild klicken und die Option Bild-Eigenschaften auswählen.
Wichtig: Um ein Bild einfügen zu können, muss dieses zuvor auf den Server, in die Bilder-Galerie oder das Tab Dokumente einer Kategorie geladen werden und somit per URL erreichbar sein. Bilder können Sie über das Menü CMS » Bilder-Galerie bzw. über das Icon im CMS oder über Ihren FTP-Zugang auf den Server laden.


Bild 6: Bild-Eigenschaften konfigurieren

Konfiguration:
URL = Bild-URL einfügen. Diese sollte mit der relativen URL verknüpft werden, da bei Verwendung einer absoluten URL (vollständiger Pfad) das Bild bei Änderung des Domainnamens nicht mehr verfügbar wäre. Die URL können Sie aus der Bildergalerie oder aus dem Tab Dokumente durch Copy & Paste übernehmen.
Schloss-Icon = Wenn das Schloss geöffnet ist, sind die Bilddaten nicht aktualisiert und es kann zu einer falschen Bilddarstellung kommen (Verzerrung). In diesem Fall auf das Reload-Icon klicken und dann auf das Schloss-Icon. Wenn das Schloss geschlossen bleibt, ist das Bild in Ordnung.
Weitere Parameter = Wenn Sie z.B. die Breite und die Höhe des Bildes ändern möchten, wird das Schloss wieder geöffnet, weil die realen Daten den geänderten Werten nicht entsprechen. Sie können das im Bedarfsfall lassen, dürfen allerdings nicht auf das geöffnete Schloss-Icon klicken, da die Originalwerte dann bei Speichern wieder hergestellt werden.
12 Sonderzeichen Hier stehen Sonderzeichen zur Verfügung, die ausgewählt und per Klick auf OK an der Cursorposition eingefügt werden.
13 Quellcode Inhalte im Quellcode bearbeiten.
14 Rechtschreibprüfung Rechtschreibprüfung ein- bzw. ausschalten.

Tab. 1: Die Funktionen des Editors im Detail

Tastenkombination für Copy & Paste

Die folgende Tabelle erläutert die Möglichkeiten für Copy & Paste-Funktionen:

Funktion Aktion
Kopieren Strg (cmd) + C
Kopiert einen markierten Text in die Zwischenablage.
Ausschneiden Strg (cmd) + X
Entfernt einen markierten Text aus der Seite und fügt ihn in die Zwischenablage ein.
Einfügen Strg (cmd) + V
Fügt einen markierten Text aus der Zwischenablage an der Cursorposition ein.

Tab. 2: Copy & Paste-Funktionen

Text unformatiert einfügen

Wenn Sie Texte unformatiert einfügen möchten, verwenden Sie die folgende Tastenkombination beim Einfügen von Texten aus der Zwischenablage:

Funktion Aktion
Text unformatiert einfügen Umsch + Strg (cmd) + V

Tab. 3: Tastenkombination für unformatiert einfügen

Zeilenvorschub / Neue Zeile

Wird bei der Texteingabe die Taste Enter zum Einfügen einer neuen Zeile gedrückt, beginnt der Editor dabei einen neuen Absatz. Je nach Seitenlayout wird zwischen Absätzen ein größerer Abstand angezeigt, als zwischen zwei Zeilen.
Soll nur eine Zeile eingefügt werden, dann drücken Sie bitte Umschalt bzw. Shift + Enter (= soft return).

Bei einem "großen" Zeilenumbruch mit Enter wird ein p-Tag mit Leerzeichencode eingefügt:

Bild 7: p-Tag mit Leerzeichencode

Nach oben