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
Per Klick auf den Stift öffnet sich der Inline-Editor. Formatierungsoptionen wie beim normalen RTE.
RTE-Editor
Per Klick auf den Werkzeugschlüssel oder Doppelklick öffnen sich die Konfiguration Properties. Mit Klick ins Editor-Feld werden
Fullscreen-Editor
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.
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.
- 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
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- 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
So sieht ausgerückter Text aus.
- Erhöht den Einzug von ausgewähltem Text
Beispiel
- Dies ist eine Aufzählung
- So sieht ein eingerückter Aufzählungspunkt aus
- 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
| Lorem ipsum | dolor sit | consetetur sadipscing |
| sed diam | nonumy eirmod | tempor invidunt |
Erlaubt das Einfügen von drei Sonderzeichen:
© - Copyright
® - Registered Trademark
™ - Trademark
- Auswahl aus zwei Styles zum forcierten überschreiben der Standard-Schriftfarbe und Darstellung
- Custom RTE Style 1 hat je nach Website-Auftritt eine Einfärbung abweichend von der Standardfarbe
- Custom RTE Style 2 ist deutlich blasser in der Darstellung und hat je nach Website-Auftritt eine Einfärbung abweichend von der Standardfarbe
Das hier ist Custom RTE Style 1
Das hier ist Custom RTE Style 2
- 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