Der RTE bietet eine breite Palette an Formatierungsmöglichkeiten für Textinhalte. Die Anwenderoberfläche ähnelt bekannter Textverarbeitungssoftware, sodass sich die Bedienung intuitiv gestaltet. Die eingefügten Formatierungen werden automatisch in HTML-Befehle umgesetzt. Im Backend lässt sich schon annäherungsweise das Erscheinungsbild des Textes erkennen, es ist jedoch unerlässlich Änderungen im Frontend zu überprüfen.

Auch wenn die Bedienung der Editors stark an andere Textverarbeitungsprogramme erinnert, möchten wir Ihnen alle Funktionen kurz vorstellen. Denn manche Bearbeitungsoptionen sind selbsterklärend und andere wiederum nicht.

Stil

Es gibt drei verschiedene Stilarten. In einem normalen Text sind zwei Stile verfügbar: Blockstile und Inline Stilarten. Zur dritten Stilart kommen wir in den Abschnitten zu Links und Tabellen.

Der entscheidende Unterschied zwischen den beiden immer vorhandenen Stilen ist der Bereich auf den sie sich auswirken. Blockstile gelten immer für einen ganzen Absatz. Um einen Blockstil einzustellen, muss man im Editor nur in den Absatz klicken, der formatiert werden soll und wählt im Anschluss im Dropdown Menü den gewünschten Stil. Ein ganzer Absatz ist so von der Änderung betroffen, ohne dass man etwas markieren muss. Das heißt auch, dass sich Textabschnitte in einem anderen Absatz befinden müssen, wenn sie anders/normal formatiert werden sollen. Folgende Blockstile stehen zur Auswahl:

  • Header 1-6 (Überschriften)
  • Bereich – Normal/Groß/Klein (in den Screenshots unten) zu sehen
  • Size: Lead (ganzen Abschnitt in größerer Schriftgröße)
  • Alert: Danger/Success/Warning/Info (wie normaler Bereich, nur farbig)
  • Spacer: 15 px/30 px/45 px/60 px/75 px/ 90px (definierter Abstand zwischen zwei Absätzen)

Um Inline Stilarten anzuwenden, müssen entsprechende Bereiche, Sätze oder Wörter dafür markiert werden. Danach wählen Sie, wie auch bei Blockstilen die Formatierung aus dem Dropdown Menü aus (für Inline Stilarten scrollen Sie einfach weiter nach unten im Stil-Menü). Folgende Stilarten stehen Ihnen zur Verfügung (alle sind in den Screenshots zu sehen, sowie auf unserer Vorschau-Seite):

  • Size: Small (kleine Schriftgröße)
  • Color: Muted/Primary/Success/Info/Warning/Danger/Default (Textfarbe)
  • Label: Default/Success/Warning/Danger/Info/Badge (Markierung)

Die Farben der verschiedenen Stile entsprechen den Standard-Einstellungen der Website-Base. Der Design-Konfigurator ermöglicht es Ihnen diese Farben individuell an Ihr Corporate Design anzupassen.

Wenn Sie einen Stil entfernen möchten, klicken Sie in die betroffene Stelle im Text und klicken im Dropdown Menü auf das bereits gewählte Format. Sollte das nicht funktionieren, gibt es zwei weitere Arten eine Formatierung zu löschen. Wir stellen Sie Ihnen in den Abschnitten Formatierung entfernen und Quellcode vor.

Absatzformat

Das zweite Dropdown-Menü ist das Absatzformat. Es gibt nur zwei Optionen: Normal und Formatiert. Standardmäßig ist immer 'normal' eingestellt. Ein formatierter Absatz hat im Frontend keine Umbrüche und kann horizontal gescrollt werden.

Fett, Kursiv, Tiefgestellt, Hochgestellt & Listen

Fett, kursiv, tiefgestellt, hochgestellt und Listen sind typische Optionen in gängigen Textbearbeitungsprogrammen. Sie werden genauso angewendet, wie in eben diesen Programmen.

  1. Markieren Sie das Zeichen, Wort, die Wortgruppe oder die Zeile, die fett, kursiv, tiefgestellt, hochgestellt oder als Listen dargestellt werden sollen.
  2. Um die Formatierung wieder zu entfernen, klicken Sie in ein formatiertes Wort oder einen Listeneintrag bzw. markieren eine betroffene Wortgruppe und 'schalten die Option aus', indem Sie einfach wieder auf das gewählte Icon klicken.
  • Für Listen können Sie alternativ eine neue Zeile beginnen und dann eine der beiden Listen anwählen. Jede weitere Zeile ist ein neuer Listeneintrag.
  • Mehrere Formatierungen lassen sich problemlos miteinander zu kombinieren.
  • Zwei weitere Möglichkeiten eine Formatierung zu entfernen, sind die Option Formatierung entfernen und der Quellcode.

Zitatblock

Mit einem Zitatblock lassen sich Zitate auf eine besondere Art und Weise hervorheben.

Textausrichtung: Linksbündig, Zentriert, Rechtsbündig und Blocksatz

Auch die Textausrichtung lässt sich individuell für jeden Absatz gestalten. Klicken Sie dafür einfach in einen Absatz und wählen Sie die Ausrichtung. Soll der Text wieder anders ausgerichtet werden, wählen Sie einfach eine andere Option. Die Ausrichtung lässt sich auch mit Formatierung entfernen und im Quellcode ändern. Standardmäßig ist der Text linksbündig.

Link einfügen/editieren

Um Text zu verlinken klicken Sie in ein Wort oder markieren eine ganze Wortgruppe und gehen auf das Link-Icon. Der Link-Browser öffnet sich. Dieser besitzt fünf Tabs. Über jeden Reiter lässt sich ein Link einfügen, sie unterscheiden sich, je nachdem welche Art von Link Sie einfügen möchten: Seite, Datei, Ordner, Externe URL, E-Mail.

Das Verlinken funktioniert im Grunde immer gleich. Am meisten werden Sie wahrscheinlich mithilfe des ersten Tabs verlinken – hier setzen Sie interne Links, also Links, die auf Stellen auf Ihrer eigenen Seite der verweisen.

Legen Sie ganz oben im Link-Browser fest, ob der Link in einem neuen Tab/Fenster geöffnet werden soll. Wenn Sie an der Stelle nichts auswählen, wird der Link im aktuellen Browser-Tab geöffnet. Der Titel des Linkes wird angezeigt, wenn ein User mit der Maus über dem Link bleibt.

Einen internen Link fügen Sie folgendermaßen ein:

  1. Wählen Sie das Zielfenster und vergeben Sie einen Titel.
  2. Klappen Sie den Seitenbaum im linken Bereich des Link-Browsers auf (Klick auf den Pfeil links).
  3. Wählen Sie:
    • eine Seite mit einem Klick auf den Seitennamen
    • oder einen Seiteninhalt, indem Sie mit auf den umrandeten Pfeil links neben dem Seitennamen klicken und dann im rechten Bereich des Link-Browsers einen Inhalt verlinken.
  4. Um einen Link zu bearbeiten, klicken Sie im Text in den Link rein und öffnen mit dem Link-Button den Link-Browser.
  5. Um einen Link zu entfernen, klicken im Text auf den Link und betätigen dann das zweite Link-Icon mit dem Kreuz.

Im rechten Browser-Bereich werden Inhalte einer Seite mit den vergebenen Überschriften gelistet. Um Inhalte eindeutig identifizieren zu können, muss jedes Inhaltselement eine individuelle Überschrift haben (diese kann auch verborgen werden).

Für Links öffnet sich ein neuer Objektstil. Mit diesem können Links als Buttons dargestellt werden.

Im Frontend werden Links (normale Links und Link-Buttons) durch einen Hover-Effekt kenntlich gemacht.

Ausschneiden, Kopieren & Einfügen

Text kann, wie von anderen Programmen gewohnt, mit STRG + C kopiert, mit STRG + X ausgeschnitten und mit STRG + V eingefügt werden. Darüber hinaus können Sie das auch mit Buttons im RTE machen.

Zusätzlich können Sie Texte aus der Zwischenablage als Klartext einfügen oder aus Word einfügen. Diese beiden Optionen werden allerdings nicht von allen Browsern unterstützt.

Beim Einfügen von Texten sollte man außerdem beachten, dass sich ursprüngliche Formatierungen 'einschleichen' könnten. Fügen Sie deswegen Text im Quellcode-Modus ein oder nutzen Sie als Zwischenschritt einen einfachen Texteditor, der unerwünschte Formatierungen und Sonderzeichen eliminiert.

Formatierung entfernen

Markieren Sie den Bereich im Text, wo die Formatierung entfernt werden soll und klicken auf den Button für Formatierung entfernen. Jede Formatierung wird dadurch entfernt. Bereiche und Links bleiben bestehen.

Rückgängig & Wiederherstellen

Sie können jederzeit im Text einige Schritte zurückgehen oder wiederholen. Nutzen Sie dafür die Tastenkombinationen STRG + Z für rückgängig und STRG + Y für wiederherstellen oder nutzen Sie die entsprechenden Pfeile im RTE.

Tabelle

Tabellen lassen sich ähnlich wie in einem Textverarbeitungsprogramm erstellen. Sie wählen am Anfang, aus wie vielen Zeilen und Spalten die Tabelle bestehen soll. Zu jeden Zeitpunkt können Sie Zeilen und Spalten hinzufügen oder Zellen verbinden. Ihnen stehen also alle typischen Optionen zum Bearbeiten einer Tabelle zur Verfügung. Zu diesen gelangen Sie, wenn Sie in der Tabelle einen Rechtsklick machen und im erschienen Menü die Tabelleneigenschaften wählen. Folgende Werte können angepasst werden:

  • Kopfzeile: keine, erste Zeile, erste Spalte oder beide)
    • Kopfzeilen sind anders formatiert als andere Zellen und Inhalte.
  • Rahmengröße: Freifeld zum Eintragen des Wertes (in px)
    • Bestimmt die Dicke des Außenrahmens.
  • Ausrichtung: nicht festgelegt, links, zentriert, rechts
    • Legt Ausrichtung der Tabelle fest.
    • Um Text auszurichten, nutzen Sie die Optionen in der Bearbeitungspalette über dem Textfeld oder die Zelleneigenschaften.
  • Überschrift: Freifeld zum Eintragen einer Überschrift
    • Überschrift erscheint über der Tabelle und kann wie normaler Text bearbeitet und ausgerichtet werden.
  • Inhaltsübersicht: Freifeld zum Eintragen einer Inhaltsübersicht
    • Ist im Frontend nicht zu sehen.

Einzelne oder mehrere Zellen lassen sich ebenfalls in den Zelleneigenschaften bearbeiten. Klicken Sie dafür mit einem Rechtsklick in eine Zelle oder markieren Sie mehrere Zellen und nutzen im Anschluss den Rechtsklick. Im erschienen Menü gehen Sie dann auf Zelle > Zelleneigenschaften. Folgendes können Sie hier anpassen:

  • Zeilenumbruch: ja, nein
  • Horizontale Ausrichtung: nicht festgelegt, links, zentriert, rechts, Blocksatz
    • Richtet den Text in der Zeile horizontal aus.
    • Kann auch über die sichtbaren Bearbeitungsoptionen über dem Textfeld ausgerichtet werden. In den Zelleneigenschaften wird dann trotzdem 'nicht festgelegt' ausgewählt sein, auch wenn im Frontend der Text entsprechend ausgerichtet ist.
  • Vertikale Ausrichtung: nicht festgelegt, oben, Mitte, unten, Grundlinie
    • Richtet den Text vertikal aus.
  • Zellart: Daten, Überschrift
    • Im Gegensatz zu den Tabelleneigenschaften können Sie hier einzelne Zellen als Überschrift formatieren.
  • Hintergrundfarbe & Rahmenfarbe: Freifeld zu eintragen eines Farbcodes (z. B. #000000 oder #FFFFFF)
    • Legt die Hintergrund- und Rahmenfarbe der markierten Zellen fest.

Wenn Sie sich in einer Tabelle befinden, werden Tabellen-Objektstile verfügbar. Hier können Sie das Gesamterscheinungsbild festlegen, also ob die Zeilen abwechselnd gefärbt sind, die Tabelle einen sichtbaren Rahmen hat oder einzelne Zellen/Zeilen hervorheben.

Horizontale Linie einfügen

Mit einer horizontalen Linie kann man Inhalte optisch voneinander trennen, wie es unten im Screenshot zu sehen ist.

Sonderzeichen einfügen

Bei Bedarf können jederzeit Sonderzeichen in den Text eingefügt werden. Klicken Sie einfach das Icon für die Sonderzeichen an und es erscheint ein Fenster mit der Auswahl. Klicken Sie das benötigte Zeichen an: Das Fenster schließt sich und das Sonderzeichen befindet sich nun im Text.

Maximieren

Normalerweise wird der RTE im Bearbeitungsmodus von Inhaltselementen oder Seiten angezeigt, mit allen Bearbeitungsoptionen, die sich oberhalb und unterhalb des Editors befinden. Insgesamt ist er dabei nur 500 px hoch. Um die Ansicht des RTEs zu vergrößern und alle anderen Optionen auszublenden, maximieren Sie einfach den Editor. Das bewirkt, dass im ganzen Inhaltsbereich nur noch der Editor und seine Optionen zu sehen sind. Besonders bei langen Texten kann es sinnvoll sein, diese Option zu nutzen.

Bei einem weiteren Klick auf das Icon gelangen Sie wieder zu der normalen Ansicht.

Quellcode

Den Quellcode braucht man als Redakteur im Grunde nicht, manchmal kann es jedoch von Vorteil sein diesen Modus zu haben, z. B. beim Einfügen von Texten oder zum Entfernen unerwünschter Formatierungen.

Beim Einfügen von Texten schalten Sie einfach auf Quellcode um und fügen den Text ein, somit werden keine Formatierungen übertragen oder Sonderzeichen gesetzt. Im normalen Modus kann der Text dann wie gewohnt bearbeitet werden.

Selbst wenn Sie den Text erst im Editor schreiben und bearbeiten, können sich Absätze einschleichen. Diese sehen Sie im Normalmodus nicht, aber sie wirken sich auf das Erscheinungsbild des Textes im Frontend aus. Im Quellcode halten Sie dafür Ausschau nach dem Code-Schnipsel:  . Diesen müssen Sie vor allem dann entfernen, wenn er sich mitten im Text befindet.

Sie wollen mehr erfahren?

Alle Informationen zu den verfügbaren Angeboten finden Sie auf den Seiten unserer Website-Base. Sie haben die Möglichkeit eine Webseite zum Fixpreis erstellen zu lassen oder entscheiden sich für ein Website as a Service Paket, mit dem keine weiteren Kosten für Hosting oder Sicherheits- und Funktionsupdates auf Sie zukommen werden.