CBK-005 Text

Wann wird die Komponente verwendet?

Die Textkomponenten nutzt einen Rich-Text-Editor (RTE) und erlaubt eine große Bandbreite an Optionen zum Bearbeiten und Formatieren von Textinhalten.

Die Textkomponente kann über drei unterschiedlichen Editor-Einstellungen genutzt werden. Je nach Editor-Einstellung stehen unterschiedliche Formatierungswerkzeuge zur Verfügung. Wir empfehlen zur einfachen Bearbeitung und Übersicht das Bearbeiten im Vollbildmodus mit allen Formatierungswerkzeugen wie hier in den Screenshots angezeigt.

Inline-Editor

CBK 005 Text Komponente Screenshot vom Bleistift-Symbol für den Inline-Editor

Per Klick auf den Stift öffnet sich der Inline-Editor. Formatierungsoptionen wie beim normalen RTE.

CBK 005 Text Komponente Ansicht Inline-Editor mit allen Formatierungswerkzeugen ohne Beispieltext

RTE-Editor

Textkomponente Ansicht markiertes Werkzeug-Symbol für den RTE-Editor

Per Klick auf den Werkzeugschlüssel oder Doppelklick öffnen sich die Konfiguration Properties. Mit Klick ins Editor-Feld werden

Textkomponente Detailansicht der Formatierungswerkzeuge im RTE-Editor

Fullscreen-Editor

Textkomponente Detailansicht Vollbild-Symbol für die Vollbildansicht in den Bedienelementen der Komponente

Zunächst den Inline- oder RTE-Editor öffnen und das Fullscreen-Symbol anklicken. Der Fullscreen-Editor öffnet sich im entsprechenden Vollbild und legt alle möglichen Formatierungswerkzeuge für den Text offen.

Textkomponente Detailansicht der Formatierungswerkzeuge im Vollbildmodus

Welche Formatierungsoptionen stehen zur Verfügung?

Im Folgenden sind alle Formatierungswerkzeuge aus der Ansicht des Fullscreen-Editors aufgezeigt (beginnend links, fortlaufend nach rechts) und erläutert. Darunter befindet sich ein Akkordeon mit einem kurzen Beispiel.

Screenshot der Einstellungen für die Text-Komponente im Vollbildmodus

  • Hervorhebung von Text durch fetten
  • Strg+B kann als Tastaturbefehl verwendet werden.

Beispiel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  • Hervorhebung von Text durch kursiv / schräg stellen
  • Strg+I kann als Tastaturbefehl verwendet werden.

Beispiel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  • Tieferstellen von Text durch Subscript

Beispiel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.1234

  • Hochstellen von Text durch Superscript

Beispiel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.1234

  • Einfügen von internen und externen Links im Fließtext (In-Text-Link)
  • unterschiedliche Zielfenster (Targets) wählbar für intern und extern sowie Verhalten von Links in eingebetteten Inhalten (iFrames)
    • Selbe Registerkarte
    • Neue Registerkarte
    • Übergeordneter Frame
    • Top-Frame

Beispiel

Dies ist ein Beispielsatz mit einem In-Text-Link, der intern verlinkt. Der Link öffnet sich im selben Tab.

Dies ist ein Beispielsatz mit einem In-Text-Link, der extern verlinkt. Der Link öffnet sich in einem neuen Tab.

  • Auflösung von verlinkten Texten ohne dabei den Text entfernen zu müssen
  • Einstellung ist nur verfügbar, sofern ein In-Text-Link besteht

  • ein Anchor-Link ist ein eigens festgelegter spezieller Link auf einen bestimmten Abschnitt auf einer Website
  • auf Klick wird der User nach unten oder oben zum gewünschten Abschnitt einer (oftmals derselben) Seite geführt
  • Anchor-Links dienen dazu leichter durch längere Seiten zu navigieren, wie etwa bei FAQs oder Inhaltsverzeichnissen
  • das Anchor-Symbol bestimmt über ein kurzes Stichwort per Hashtag vergeben werden
  • Anchor-IDs müssen einzigartig sein und dürfen sich nicht doppeln für dieselbe Seite
  • Anchor-IDs werden immer zusammengeschrieben und idealerweise klein

  • Über die Suche lässt sich eine Zahlen- oder Textreihenfolge innerhalb der jeweiligen Textkomponte suchen
  • Groß- und Kleinschreibung ist zu beachten

  • Über die Ersetzen-Funktion lässt sich eine Zahlen- oder Textreihenfolge innerhalb der jeweiligen Textkomponte ersetzen
  • Über die Suchfunktion lassen sich einzelne Zahlen- oder Textreihenfolge sowohl einzeln als auch gänzlich ersetzen
  • Groß- und Kleinschreibung ist zu beachten

  • Macht die vergangene Aktion wieder rückgängig, z.B. Löschen eines Textes

  • Stellt die vergangene Aktion wieder her, z.B. Einfügen eines Textes

  • Beeinflusst die Textausrichtung des jeweiligen Paragraphen, in diesem Fall linksbündig

Beispiel

Dieser Text ist linksbündig und beinhaltet noch Platzhaltertext. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  • Beeinflusst die Textausrichtung des jeweiligen Paragraphen, in diesem Fall zentriert

Beispiel

Dieser Text ist zentriert und beinhaltet noch Platzhaltertext. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  • Beeinflusst die Textausrichtung des jeweiligen Paragraphen, in diesem Fall rechtsbündig

Beispiel

Dieser Text ist rechtsbündig und beinhaltet noch Platzhaltertext. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  • Beeinflusst die Textausrichtung des jeweiligen Paragraphen, in diesem Fall mittig als Blocksatz

Beispiel

Dieser Text ist mittig zentriert und beinhaltet noch Platzhaltertext. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  • Einzelne Zeilenumbrüche markiert können so zu einer Aufzählung gesetzt werden
  • Einzelne Punkte als Liste, fortlaufend

Beispiel

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

  • Einzelne Zeilenumbrüche markiert können so zu einer nummerierten Aufzählung gesetzt werden
  • Einzelne Punkte als Zahlen, fortlaufend

Beispiel

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet

  • Verringert den Einzug von ausgewähltem Text 
  • Ausrücken ist nur möglich, wenn der gewählte Text bereits eingerückt ist

Beispiel

Dies ist ein normaler Fließtext mit einer Aufzählung, um das Ausrücken am besten abzubilden.

  • Aufzählungspunkt
    • Aufzählungspunkt eingerückt
      • Weiterer Aufzählungspunkt eingerückt
    • Aufzählungspunkt wieder ausgerückt, so dass er nur einmalig eingerückt erscheint
  • Aufzählungspunkt wieder weiter ausgerückt, so dass er wie ein normaler Aufzählungspunkt erscheint

  • Erhöht den Einzug von ausgewähltem Text 

Beispiel

Dies ist ein normaler Fließtext mit einer Aufzählung, um das Einrücken am besten abzubilden.

  • Aufzählungspunkt
    • Aufzählungspunkt eingerückt
      • Weiterer Aufzählungspunkt eingerückt
    • Aufzählungspunkt wieder ausgerückt, so dass er nur einmalig eingerückt erscheint
  • Aufzählungspunkt wieder weiter ausgerückt, so dass er wie ein normaler Aufzählungspunkt erscheint

  • Fügt eine Tabelle in den Textbereich ein
  • Nach dem Einfügen sind weitere Optionen verfügbar:
    • Spalten (Columns): Die Anzahl der Spalten der Tabelle
    • Zeilen (Rows): Die Anzahl der Zeilen der Tabelle
    • Breite (Width) Die Gesamtbreite der Tabelle
    • Höhe (Height) Die Gesamthöhe der Tabelle
    • Textabstand (Cell padding): Der Abstand um den Zelleninhalt
    • Zellenabstand (Cell spacing): Der Abstand zwischen Zellen
    • Rahmen (Border): Die Stärke der Rahmenlinie der Tabelle in Pixeln
    • Beschriftung (Caption): Beschriftung der Tabelle
  • Nach dem Erstellen einer Tabelle, erscheinen bei erneutem Klick auf das Table-Symbol weitere Table-Properties.
  • In den Table-Properties lassen sich wie in anderen Programmen zur Tabellenbearbeitung Spalten und Zeilen hinzufügen, zusammenfügen, entfernen.
  • Die Höhe und Breite der Tabelle lässt sich in % oder px angeben.

Beispiel

Tabellenüberschrift
Lorem ipsum dolor sit consetetur sadipscing
sed diam nonumy eirmod tempor invidunt

Erlaubt das Einfügen von drei Sonderzeichen:

© - Copyright

® - Registered Trademark

™ - Trademark

  • Hierüber wird die Absatzformatierung festgelegt
  • Per Dropdown lässt sich einstellen: Paragraph, H1, H2, H3, H4, H5, H6, Blockquote, Horizontal Rule

Beispiel

Paragraph Beispielsatz als H1

Paragraph Beispielsatz als H2

Paragraph Beispielsatz als H3

Paragraph Beispielsatz als H4

Paragraph Beispielsatz als H5
Paragraph Beispielsatz als H6
Paragraph Text als Blockquote gesetzt

Hierunter folgt eine horizontale Trennlinie


 

Im Vollbild-Modus des Rich-Text-Editors stehen zwei vordefinierte Text-Styles zur Verfügung. Diese lassen sich über das S-Symbol auswählen. Je nach gewähltem Style verändern sich Farbgebung und Intensität der Schrift.

Bei Anwendung innerhalb einer ungeordneten Liste (unordered list) wird zusätzlich ein vordefiniertes Emoji als Aufzählungszeichen dargestellt. In geordneten Listen (ordered lists) werden keine Emojis eingesetzt.

Es ist nicht möglich die Emojis in derselben Liste zu mischen.

Custom RTE Style 1

  • Farbvariante weicht von der Standardfarbe ab (je nach Website-Auftritt)
  • In ungeordneten Listen erscheint ein Feuer-Emoji anstelle des Aufzählungspunktes 

Custom RTE Style 2

  • Blassere Schriftfarbe mit farblicher Anpassung je nach Website-Auftritt
  • In ungeordneten Listen erscheint ein Raketen-Emoji anstelle des Aufzählungspunktes 

Die Emojis und Farbvarianten sind während der Bearbeitung im Vollbild-Modus nicht sichtbar. Änderungen werden erst nach dem Speichern und Schließen der RTE-Fläche auf der Seite angezeigt.

Anwendungsbeispiele
 
Einstellung Custom RTE Style 1 in einem Fließtext ohne zusätzliche Formatierungen.
 
Einstellung Custom RTE Style 2 in einem Fließtext ohne zusätzliche Formatierungen.
 
  1. Das hier ist ein Custom RTE Style 1  Beispiel in einer geordneten list / Aufzählungsliste
  2. Das hier ist ein Custom RTE Style 2  Beispiel in einer geordneten list / Aufzählungsliste

 

  • Einstellung Custom RTE Style 1 in einer unordered list
  • Einstellung Custom RTE Style 1 in einer unordered list

 

  • Einstellung Custom RTE Style 2 in einer unordered list
  • Einstellung Custom RTE Style 2 in einer unordered list