Der RTE ist kontextsensitiv, d. h. Optionen werden passend zum ausgewählten Text angezeigt.

Transkript

1 Arbeiten mit dem Rich Text Editor (RTE) Allgemeines zum Editor... 1 Text formatieren... 3 Formatierungen entfernen... 5 Tabellen im RTE... 6 Links setzen... 9 Abkürzungen Sprachwechsel Mehr / Weniger Block Einfügen Allgemeines zum Editor Der Rich Text Editor im Typo3 ist ein sogenannter Wysiwyg (What You See is What You Get) Editor. Mit ihm lässt sich Text ähnlich wie in einem Textbearbeitungsprogramm bearbeiten und formatieren. Das Ergebnis wird direkt im Editor angezeigt. Das Erlernen von HTML oder einer speziellen Syntax zur Auszeichnung von Text ist dadurch für Typo3 nicht nötig. Der RTE ist kontextsensitiv, d. h. Optionen werden passend zum ausgewählten Text angezeigt. Vollbildmodus Das Eingabefeld lässt sich auf den gesamten Arbeitsbereich vergrößern. Dazu dient der Button Richt- Text-Eingabe im Vollbild rechts neben dem Editor. Zum Schließen des Vollbildmodus auf das Schließen-Symbol in der Toolbar klicken. Achtung: Änderungen unbedingt vorher speichern, sie gehen sonst beim Verlassen des Vollbildmodus verloren. Eingabefeld vergrößern Das Eingabefeld lässt sich an der rechten unteren Ecke durch Ziehen mit der Maus vergrößern

2 Statuszeile Unterhalb des Eingabefeldes befindet sich die Statuszeile. Sie kann für Redakteure interessant sein, die über HTML Kenntnisse verfügen. Durch den Klick auf einen Eintrag, bspw. table lässt sich ein Element, in diesem Fall eine ganze Tabelle, im Editor markieren und bearbeiten. Tastaturbefehle Standard Tastaturbefehle, die aus Textbearbeitungsprogrammen bekannt sind, funktionieren auch im RTE. Dazu gehören beispielsweise: Änderungen rückgängig machen Text einfügen Text kopieren Alles markieren Strg + z Strg + v Strg + c Strg + a Text einfügen Text, der aus einem Textverarbeitungsprogrammen (bspw. Word) oder aus einer Webseite kopiert wurde, enthält HTML Auszeichnungen, die entfernt werden müssen, da sie sich sonst ggf. auf das Layout auswirken würden und es zu unerwarteten bzw. unschönen Ergebnissen in der Darstellung kommt. Klicken Sie vor dem Einfügen von Text den Button Einfügen als einfachen Text aktivieren im RTE an und fügen Sie anschließend Ihren Text mit Strg + V ein. Eine weitere Möglichkeit besteht darin den kopierten Text im Windows Editor [Programme>Zubehör>Editor] oder einem anderen Texteditor einzufügen. Von dort nochmals kopieren und in Typo3 einfügen. Außerdem wird für den Firefox Browser wird ein Plugin mit dem Namen Copy Plain Text angeboten, mit dem sich unformatierter Text kopieren lässt. Allgemeine Hinweise Die Optionen im Dropdown Blockstil stehen erst zur Verfügung nachdem das Inhaltselement das erste Mal gespeichert wurde. Sie beziehen sich jeweils auf einen ganzen Absatz. Falls Sie Probleme mit dem RTE haben, hilft es oftmals das Element einmal zwischenzuspeichern

3 Text formatieren Überschriften 1. Die Zeile markieren, die als Überschrift formatiert werden soll. 2. Aus dem Dropdown Absatz entweder Überschrift 3 oder Überschrift 4 auswählen. 3. Überschrift 4 sollte immer nach einer Überschrift 3 kommen, ist dieser also untergeordnet. Fett / Kursiv / Hervorheben 1. Den Text, der formatiert werden soll, markieren. 2. Für fett formatierten Text auf den Button B klicken, für kursiv formatierten Text den Button I verwenden. 3. Für Text, der hervorgehoben werden soll, aus dem Dropdown Textstil den Eintrag Wichtig auswählen. Der Text wird anschliessend rot ausgezeichnet

4 Aufzählungen / Nummerierte Listen 1. Den Text, der als nummerierte Liste oder Aufzählung erscheinen soll, markieren. 2. Den Button Nummerierung oder Aufzählung drücken. Sonderzeichen einfügen 1. Den Cursor an die Stelle setzen, an der ein Sonderzeichen eingefügt werden soll. 2. Den Button Einfügen von Sonderzeichen drücken. 3. Es öffnet sich ein Dialogfenster, aus dem ein Sonderzeichen ausgewählt werden kann. 4. Die Sonderzeichen sind auf verschiedenen Reitern angeordnet: a. Allgemein b. Mathematisch c. Formen und Farben 5. Auf das Sonderzeichen klicken, das eingefügt werden soll. 6. Den Dialog mit einem Klick auf das Schliessen Symbol oben rechts beenden. Text hochstellen 1. Den Text, der hochgestellt werden soll, markieren. 2. Den Button Hochgestellt drücken. Zeilenumbruch einfügen Durch Drücken von Enter wird ein neuer Absatz eingefügt. Möchten Sie nur einen Zeilenumbruch einfügen, dann drücken Sie Shift + Enter

5 Änderungen rückgängig machen Zum Rückgängig machen von Änderungen steht der Button Letzte Aktion rückgängig machen zur Verfügung. Zusätzlich gibt es den Button Letzte Aktion wiederholen Arbeitsschritt rückgängig gemacht wurde., der dann eingeblendet wird, wenn ein Suchen und ersetzen 1. Den Button Suchen und Ersetzen drücken. 2. Bei Suche nach, das Wort eingeben, nachdem gesucht werden soll. 3. Wenn das gesuchte Wort ersetzt werden soll, bei Ersetze durch das neue Wort eingeben. 4. Im Bereich Optionen angeben, ob nur ganze Wörter gefunden werden sollen und ob Groß- und Kleinschreibung berücksichtigt werden soll. 5. Wenn bei Alle Fundstellen ersetzen ein Häkchen gesetzt wurde, werden automatisch, ohne Rückfrage, die gefundenen Wörter ersetzt. 6. Anschliessend den Button Nächster anklicken. 7. Es wird eine Meldung angezeigt, aus der hervorgeht ob und wie häufig die Zeichenkette gefunden und ersetzt wurde. 8. Falls das Häkchen bei Alle Fundstellen ersetzen nicht aktiviert war, wird die erste Fundstelle angezeigt und der Redakteur kann entscheiden, ob das Wort ersetzt werden soll. Mit einem Klick auf Nächster wird zur nächsten Fundstelle weitergegangen. Formatierungen entfernen Wenn Sie Formatierungen entfernen möchten, markieren Sie NICHT die gesamte Zeichenkette, sondern setzen den Cursor an eine Stelle innerhalb des formatierten Textes. Anschliessend können Sie aus dem Dropdown Blockstil entfernen bzw. aus dem Dropdown Absatz Blockformat entfernen auswählen. Das Gleiche gilt für fetten und kursiven Text

6 Tabellen im RTE Tabelle einfügen 1. Den Cursor an die Stelle im Textfeld setzen, an der die Tabelle eingefügt werden soll. 2. Auf den Button Tabelle einfügen klicken. 3. Im nachfolgenden Dialog die Anzahl der Zeilen und Spalten eingeben. Die Anzahl kann später noch verändert werden. 4. Optional können ein Titel und eine Zusammenfassung eingegeben werden. Die Zusammenfassung wird von Screenreadern vorgelesen. 5. Mit einem Klick auf OK wird die Tabelle eingefügt. Text eingeben 1. Den Cursor in die Zelle setzen, in der Text eingegeben werden soll. 2. Text eingeben. Den Text ggf. formatieren, Links oder Sonderzeichen lassen sich ebenfalls eingeben. 3. Mit den Pfeiltasten zur nächsten Zelle navigieren. Ränder sichtbar machen Nach dem Speichern sind die Ränder einer Tabelle nicht mehr sichtbar sind. Mit einem Klick auf den Button Ränder umschalten werden diese wieder angezeigt

7 Zeile, Spalte oder Zelle einfügen 1. Zeilen, Spalten oder Zellen lassen sich entweder vor oder hinter einer bestehenden Zeile / Spalte / Zelle einfügen. 2. Den Cursor in die Zeile oder Spalte setzen, an der ein neues Element eingefügt werden soll. 3. Je nachdem wo das neue Element eingefügt werden soll, den entsprechenden Button drücken. Zeile vor dieser einfügen Zeile nach dieser einfügen Spalte vor dieser einfügen Spalte nach dieser einfügen Zelle vor dieser einfügen Zelle nach dieser einfügen 4. Änderungen können mit Strg + z rückgängig gemacht werden. Zeile, Spalte oder Zelle löschen 1. Den Cursor an eine beliebige Position in der Zeile / Spalte / Zelle setzen, die gelöscht werden soll. 2. Je nachdem welches Element gelöscht werden soll, den entsprechenden Button drücken. Zeile löschen Spalte löschen Zelle löschen 3. Änderungen können mit Strg + z rückgängig gemacht werden. Zeilen farbig hinterlegen 1. Um die Lesbarkeit von Tabellen zu erhöhen, sollten die Tabellenzeilen abwechselnd hell und dunkel hinterlegt werden. 2. Den Cursor an eine beliebige Stelle in der Zeile setzen, die bearbeitet werden soll. 3. Den Button Zeileneigenschaften anklicken. 4. Aus dem Dropdown bei CSS-Stil entweder Dunkler Hintergrund oder Weißer Hintergrund auswählen

8 5. Mit OK Speichern. 6. Dieses Vorgehen für alle weiteren Zeilen wiederholen. Text vor oder nach Tabelle einfügen Wenn Sie im Editor bisher nur eine Tabelle eingefügt haben, lässt sich der Cursor nicht vor oder hinter die Tabelle setzen um Text einzugeben. Mit Hilfe zweier Buttons lässt sich das ändern. 1. Setzen Sie den Cursor in die Tabelle. 2. Klicken Sie auf den Button Einen Absatz vor dem aktuellen Block einfügen oder Einen Absatz nach dem aktuellen Block einfügen um einen entsprechenden Absatz zu erzeugen. 3. Anschließend können Sie Ihren Text an der gewünschten Stelle eingeben

9 Tabelleneigenschaften bearbeiten 1. Den Cursor an eine beliebige Stelle innerhalb der Tabelle setzen, deren Eigenschaften bearbeitet werden sollen. 2. Auf den Button Tabelleneigenschaften bearbeiten klicken. 3. Die Eigenschaften, bspw. Titel und Zusammenfassung, bearbeiten. 4. Mit OK speichern. Tabelle löschen 1. Mit der rechten Maustaste in die Tabelle klicken. 2. Aus dem Kontextmenü Entferne das <table> auswählen 3. Die Tabelle wird gelöscht. Links setzen 1. Den Text markieren, der verlinkt werden soll. 2. Auf den Button Insert link klicken

10 3. Es öffnet sich ein Dialogfenster, in dem verschiedene Links gesetzt werden können: a. Seite -> für Links auf Seiten oder Elemente innerhalb von Typo3 b. Externe URL c. d. Medien -> für Dateidownloads Link auf eine interne Seite 1. Den Reiter Seite auswählen. 2. Die Eingabefelder oberhalb des Seitenbaums können so belassen werden. Sie sind automatisch mit den richtigen Werten gefüllt. 3. Den Seitenbaum aufklappen. 4. Mit einem Klick auf den Titel die Seite auswählen, auf die verlinkt werden soll. Link auf eine anderssprachige Seite 1. Den Reiter Seite auswählen. 2. Wenn von einer deutschen auf eine englischsprachige Seite verlinkt werden soll, im Feld Abfrageparameter den Wert L=1 eingeben 3. Wenn von einer englischsprachigen auf eine deutsche Seite verlinkt werden soll, im Feld Abfrageparameter den Wert L=0 eingeben. 4. Den Seitenbaum aufklappen. 5. Mit einem Klick auf den Titel die Seite auswählen, auf die verlinkt werden soll

11 Link auf ein internes Inhaltselement 1. Die Schritte 1 bis 3 sind analog zum Einfügen eins Links auf einer Seite. 2. Anschließend auf den roten Pfeil neben dem Seitentitel klicken. 3. Alle auf der Seite vorhandenen Inhaltselemente werden angezeigt. 4. Mit einem Klick auf den Titel des Inhaltselements wird der Link gesetzt. Externe Links 1. Den Reiter Externe URL auswählen. 2. Im Feld URL die Adresse eingeben, auf die verlinkt werden soll. 3. Die Werte in den übrigen Eingabefeldern können so gelassen werden, sie sind automatisch mit den richtigen Werten gefüllt. 4. Mit einem Klick auf Link setzen wird der Link im Text eingefügt. 1. Den Reiter auswählen. 2. Im Feld Adresse die Adresse des Empfängers eingeben. 3. Die Werte in den übrigen Eingabefeldern können so gelassen werden, sie sind automatisch mit den richtigen Werten gefüllt. 4. Mit einem Klick auf Link setzen wird der Link im Text eingefügt

12 Datei 1. Den Reiter Medien auswählen. 2. Die Eingabefelder oberhalb des Seitenbaums können so belassen werden. Sie sind automatisch mit den richtigen Werten gefüllt. 3. Den Verzeichnisbaum aufklappen. 4. Auf den Ordner klicken, in dem die gewünschte Datei liegt. 5. Im rechten Bereich, werden alle Dateien angezeigt, die in den ausgewählten Ordner vorhanden sind. 6. Mit einem Klick auf den Dateinamen wird der Link eingefügt. Hinweis Dateien sollten grundsätzlich über die Dateiablage ( Datei -> Dateiliste im Modulmenü) hochgeladen werden und dort sinnvoll in Ordnern verwaltet werden. Für jeden Bereich steht ein eigener Upload Ordner zur Verfügung, in dem weitere Unterordner angelegt werden können. Bei Bildern sollte direkt nach dem Upload ein ALT-Text vergeben werden. Abkürzungen Aus Gründen der Barrierefreiheit sollten Abkürzungen in Texten gekennzeichnet werden. Dazu muss jede Abkürzung als eigener Datensatz im Typo3 angelegt werden. Im Seitenbaum gibt es den Ordner Abkürzungen. Hier werden die Datensätze angelegt und verwaltet. Dieser Ordner ist für alle Redakteure sichtbar und editierbar. Die hier hinterlegten Abkürzungen sind im gesamten Typo3 der Uni verwendbar

13 Neue Abkürzung anlegen Bitte beachten: Bevor Sie eine neue Abkürzung anlegen, überprüfen Sie bitte ob die Abkürzung bereits existiert um doppelte Einträge zu vermeiden. Existiert eine Abkürzung bspw. für Sprache Standard und soll auch für englischsprachige Einträge verwendet werden, braucht nur die Sprache auf Alle geändert werden. 1. Auf das Icon Datensatz erstellen, oberhalb der Liste der Abkürzungen, klicken. 2. Falls der Begriff auf einer englisch-sprachigen Seite verwendet werden soll, bei Sprache English auswählen. Soll er sowohl auf deutschen als auch auf englischen Seiten verwendet werden, bei Sprache Alle auswählen. 3. Bei Begriff die ausgeschriebene Variante eingeben. 4. Bei Abkürzung die abgekürzte Form eingeben. 5. Bei Sprache der Abkürzung die Sprache des Begriffs auswählen. Bspw. bei HTML English. 6. Den neuen Datensatz speichern. Abkürzung im RTE verwenden 1. Den Text markieren, der als Abkürzung ausgezeichnet werden soll. 2. Auf den Button Akronym oder Abkürzung einfügen / bearbeiten klicken

14 3. Wenn es den markierten Begriff bereits als Datensatz gibt, werden die Felder im nachfolgenden Dialog bereits vorausgefüllt. Lediglich die Sprache muss in der Regel noch ausgewählt werden. Wird der Begriff nicht automatisch ausgewählt, kann dieser manuell aus der Liste ausgewählt werden. 4. Mit OK speichern. 5. Der Begriff wird im RTE und auch später im Frontend mit einer gestrichelten Linie ausgezeichnet. Beim Hovern mit der Maus wird die ausgeschriebene Variante als Tooltip angezeigt

15 Sprachwechsel Aus Gründen der Barrierefreiheit sollten Sprachwechsel im Text gekennzeichnet werden. Diese Auszeichnung ist im Browser nicht sichtbar. Sie wird aber von Screen Readern wahrgenommen und der Text entsprechend vorgelesen. Im Beispieltext betrifft das z. B. das Wort Skyline. 1. Das Wort markieren, das mit einem Sprachwechsel versehen werden soll. 2. Aus dem Dropdown Sprachen die entsprechende Sprache auswählen. In diesem Fall English. 3. Die Markierung wird im Text nicht angezeigt. 4. Möchten Sie sie anzeigen lassen, drücken Sie den Button Sprachmarkierungen anzeigen. 5. Die mit einer Sprachmarkierung versehenen Wörter, werden im Text markiert

16 Mehr / Weniger Block Einfügen Sie haben die Möglichkeit sehr langen Text im Frontend gekürzt anzeigen zu lassen. Besucher der Webseite können dann im Text auf mehr klicken um sich den vollständigen Text anzeigen zu lassen bzw. auf weniger klicken um den Text wieder einzuklappen. 1. Setzen Sie den Cursor im RTE in den Absatz, den Sie kürzen möchten. 2. Wählen Sie den Eintrag Mehr aus dem Dropdown für die Blockformate aus. 3. Speichern Sie Ihr Inhaltselement. 4. Im Frontend wird der Text gekürzt angezeigt