Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.
Beide Seiten, vorherige ÜberarbeitungVorherige ÜberarbeitungNächste Überarbeitung | Vorherige ÜberarbeitungLetzte ÜberarbeitungBeide Seiten, nächste Überarbeitung | ||
typo3:about:rte [2014/02/13 20:44] – [Button-Übersicht] admin | typo3:about:rte [2016/06/17 18:24] – [CSS im RTE] admin | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
====== RTE (rtehtmlarea) ====== | ====== RTE (rtehtmlarea) ====== | ||
- | Der standardmäßig installierte Rich Text Editor lässt sich umfangreich konfigurieren. Im //Extension Manager// ist zwischen drei Voreinstellungen (Minimal, Typical, Demo) wählbar. Auch lässt sich die Nutzung von Bildern im RTE bequem einstellen. Für die Nutzung einiger Buttons muss '' | + | Der standardmäßig installierte Rich Text Editor lässt sich umfangreich konfigurieren. Im //Extension Manager// ist zwischen drei Voreinstellungen (Minimal, Typical, Demo) wählbar. Auch lässt sich die Nutzung von Bildern im RTE bequem einstellen. Für die Nutzung einiger Buttons muss '' |
---- | ---- | ||
+ | ===== Die Ausgabe im Frontend ===== | ||
+ | |||
+ | Einige Angaben fügen HTML-Elemente mit Klassen zum Text hinzu, z.B. '' | ||
+ | |||
+ | Zudem werden einige HTML-Elemente, | ||
+ | |||
+ | ===== CSS im RTE ===== | ||
+ | |||
+ | Damit die Ansicht im RTE der Frontendausgabe nahe kommt, kann ein CSS-Dokument mit dem RTE verknüpft werden. In diesem sollten nur relevante Formatierungen vorhanden sein; die Verwendung des Frontend-CSS mit Angaben zum Aufbau etc. wird nicht empfohlen. | ||
+ | |||
+ | Auch wichtig: Um eigene Klassen im RTE verwenden zu können, **müssen** diese Klassen in der CSS-Datei des RTE vorhanden sein! | ||
+ | |||
+ | <code typoscript> | ||
+ | RTE.default { | ||
+ | contentCSS = path/ | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ---- | ||
===== Buttons ===== | ===== Buttons ===== | ||
Zeile 18: | Zeile 37: | ||
^fontsize|Fügt per Inline-Style eine '' | ^fontsize|Fügt per Inline-Style eine '' | ||
^formatblock|Formatiert den Textblock z.B. zu einer Überschrift. Teilweise lassen sich die Formatierungen ergänzen. Mit //remove block format// bzw. //no block format// können die Formatierungen nacheinander wieder entfernt werden.| | ^formatblock|Formatiert den Textblock z.B. zu einer Überschrift. Teilweise lassen sich die Formatierungen ergänzen. Mit //remove block format// bzw. //no block format// können die Formatierungen nacheinander wieder entfernt werden.| | ||
- | ^blockquote| | | + | ^blockquote|Fügt ein < |
- | ^insertparagraphbefore| | | + | ^insertparagraphbefore|Fügt einen (leeren) Absatz ''< |
- | ^insertparagraphafter| | | + | ^insertparagraphafter|Fügt einen (leeren) Absatz ''< |
^lefttoright|Fügt dem Absatz das Attribut '' | ^lefttoright|Fügt dem Absatz das Attribut '' | ||
^righttoleft|Fügt dem Absatz das Attribut '' | ^righttoleft|Fügt dem Absatz das Attribut '' | ||
- | ^language| | | + | ^language|Markiert den gewählten Text als gewählte Sprache.| |
- | ^showlanguagemarks| | | + | ^showlanguagemarks|(De)aktiviert einen Marker vor Inhalten, die ein Sprachattribut '' |
^left|Fügt dem Element eine Klasse // | ^left|Fügt dem Element eine Klasse // | ||
^center|Fügt dem Element eine Klasse // | ^center|Fügt dem Element eine Klasse // | ||
Zeile 31: | Zeile 50: | ||
^orderedlist|Fügt eine nummerierte Liste hinzu.| | ^orderedlist|Fügt eine nummerierte Liste hinzu.| | ||
^unorderedlist|Fügt eine unsortierte Liste hinzu.| | ^unorderedlist|Fügt eine unsortierte Liste hinzu.| | ||
- | ^definitionlist| | | + | ^definitionlist|Ermöglicht das Anlegen einer Definitionsliste. Der Button wird nur angezeigt, wenn '' |
- | ^definitionitem| | | + | ^definitionitem|Ermöglicht das Umschalten zwischen Ausdruck und Definition einer Definitionsliste.| |
- | ^outdent|Entfernt ein <div class=" | + | ^outdent|Entfernt ein '' |
- | ^indent|Fügt dem Element ein <div class=" | + | ^indent|Fügt dem Element ein '' |
- | ^formattext| | | + | ^formattext|Bietet ein Dropdownmenü für Textformatierungen (bold, citation, keyboard, ...).| |
- | ^bidioverride| | | + | ^bidioverride|Erzwingt die Textrichtung von Fremdsprachen beim ausgewählten Text mit ''< |
- | ^big|Markiert den Text mit ''< | + | ^big|Markiert den gewählten |
- | ^bold|Fügt ein '< | + | ^bold|Fügt ein ''< |
- | ^citation| | | + | ^citation|Markiert den gewählten Text mit ''< |
- | ^code| | | + | ^code|Markiert den gewählten Text mit ''< |
- | ^definition| | | + | ^definition|Markiert den gewählten Text mit ''< |
- | ^deletedtext|Markiert den Text mit ''< | + | ^deletedtext|Markiert den gewählten |
- | ^emphasis|Markiert den Text mit ''< | + | ^emphasis|Markiert den gewählten |
- | ^insertedtext| | | + | ^insertedtext|Markiert den gewählten Text mit ''< |
- | ^italic|Fügt ein '< | + | ^italic|Fügt ein ''< |
- | ^keyboard| | | + | ^keyboard|Markiert den gewählten Text mit ''< |
- | ^monospaced| | | + | ^monospaced|Markiert den gewählten Text mit ''< |
- | ^quotation| | | + | ^quotation|Markiert den gewählten Text mit ''< |
- | ^sample| | | + | ^sample|Markiert den gewählten Text mit ''< |
- | ^small|Markiert den Text mit ''< | + | ^small|Markiert den gewählten |
- | ^span| | | + | ^span|Markiert den gewählten Text mit ''< |
- | ^strikethrough|Fügt ein <span style=" | + | ^strikethrough|Fügt ein '' |
- | ^strong| | | + | ^strong|Markiert den gewählten Text mit ''< |
- | ^subscript|Fügt ein <span style=" | + | ^subscript|Fügt ein '' |
- | ^superscript|Fügt ein <span style=" | + | ^superscript|Fügt ein '' |
- | ^underline|Fügt ein <span style=" | + | ^underline|Fügt ein '' |
- | ^variable| | | + | ^variable|Markiert den gewählten Text mit ''< |
^textcolor|Bietet eine Auswahl an Textfarben.| | ^textcolor|Bietet eine Auswahl an Textfarben.| | ||
^bgcolor|Bietet eine Auswahl an Hintergrundfarben.| | ^bgcolor|Bietet eine Auswahl an Hintergrundfarben.| | ||
^textindicator|Zeigt die aktuelle Formatierung des gewählten Textes an.| | ^textindicator|Zeigt die aktuelle Formatierung des gewählten Textes an.| | ||
- | ^editelement| | | + | ^editelement|Ermöglicht ein Menü, mit dem einem Element Attribute wie //id//, //lang// und // |
- | ^showmicrodata| | | + | ^showmicrodata|ab TYPO3 4.7: (De)aktiviert einen Marker vor Inhalten, die Mikrodaten (// |
^emoticon|Bietet eine Auswahl von 16 Smilies an, die von TYPO3 mitgeliefert werden.| | ^emoticon|Bietet eine Auswahl von 16 Smilies an, die von TYPO3 mitgeliefert werden.| | ||
^insertcharacter|Bietet eine Auswahl an Sonderzeichen an, die der Benutzer bequem im RTE verwenden kann (Durchmesser, | ^insertcharacter|Bietet eine Auswahl an Sonderzeichen an, die der Benutzer bequem im RTE verwenden kann (Durchmesser, | ||
- | ^insertsofthyphen| | | + | ^insertsofthyphen|ab TYPO3 4.7: Ermöglicht das Setzen eines weichen Trennzeichens (Worttrennung durch den Browser an den angegebenen Stellen).| |
^line|Fügt an der gewählten Stelle eine Linie mit ''< | ^line|Fügt an der gewählten Stelle eine Linie mit ''< | ||
^link|Ermöglicht das Setzen von Ankern: interne/ | ^link|Ermöglicht das Setzen von Ankern: interne/ | ||
- | ^unlink| | | + | ^unlink|Entfernt einen zuvor gesetzten Anker.| |
^image|Ermöglicht das Einbetten von Bildern im RTE.| | ^image|Ermöglicht das Einbetten von Bildern im RTE.| | ||
- | ^table|Ermgölicht | + | ^table|Ermöglicht |
^user|Ermöglicht die Verwendung selbst erstellter HTML-Elemente. Diese müssen noch erstellt werden, sonst ist das Feld leer (siehe unten).| | ^user|Ermöglicht die Verwendung selbst erstellter HTML-Elemente. Diese müssen noch erstellt werden, sonst ist das Feld leer (siehe unten).| | ||
- | ^acronym| | | + | ^acronym|Markiert den gewählten Text mit ''< |
^findreplace|Ermöglicht das Suchen und Ersetzen von Wörtern und Wortteilen.| | ^findreplace|Ermöglicht das Suchen und Ersetzen von Wörtern und Wortteilen.| | ||
^spellcheck|Ermöglicht eine Rechtschreibprüfung. Hierzu muss allerdings noch zusätzliches in TYPO3 installiert werden (z.B. aspell), vorher wird der Button nicht angezeigt.| | ^spellcheck|Ermöglicht eine Rechtschreibprüfung. Hierzu muss allerdings noch zusätzliches in TYPO3 installiert werden (z.B. aspell), vorher wird der Button nicht angezeigt.| | ||
Zeile 90: | Zeile 109: | ||
^tablerestyle| | | ^tablerestyle| | | ||
^rowproperties|Zeileneinstellungen anpassen (Breite, Textausrichtung, | ^rowproperties|Zeileneinstellungen anpassen (Breite, Textausrichtung, | ||
- | ^rowinsertabove|Spalte | + | ^rowinsertabove|Zeile oben hinzufügen.| |
- | ^rowinsertunder|Spalte | + | ^rowinsertunder|Zeile unten hinzufügen.| |
^rowdelete|Gewählte Zeile löschen.| | ^rowdelete|Gewählte Zeile löschen.| | ||
^rowsplit|Gewählte Zeile teilen.| | ^rowsplit|Gewählte Zeile teilen.| | ||
- | ^columnproperties| | | + | ^columnproperties|Spalteneinstellungen anpassen.| |
- | ^columninsertbefore|Zeile links hinzufügen.| | + | ^columninsertbefore|Spalte |
- | ^columninsertafter|Zeile rechts hinzufügen.| | + | ^columninsertafter|Spalte |
^columndelete|Gewählte Spalte löschen.| | ^columndelete|Gewählte Spalte löschen.| | ||
^columnsplit|Gewählte Spalte teilen.| | ^columnsplit|Gewählte Spalte teilen.| | ||
Zeile 122: | Zeile 141: | ||
==== Buttons sortieren ==== | ==== Buttons sortieren ==== | ||
- | Die Buttons lassen sich in der Reihenfolge neu anordnen | + | Die Buttons lassen sich in der Reihenfolge neu sortieren |
Schlüsselwörter zur Unterteilung: | Schlüsselwörter zur Unterteilung: | ||
- | **space** -> kleiner Abstand (mehrere hintereinander folgende haben keine Auswirkung auf den Größe)\\ | + | **space** -> kleiner Abstand (mehrere hintereinander folgende haben keine Auswirkung auf die Abstandgröße)\\ |
**bar** -> Trennlinie\\ | **bar** -> Trennlinie\\ | ||
**linebreak** -> Zeilenumbruch\\ | **linebreak** -> Zeilenumbruch\\ | ||
Zeile 156: | Zeile 175: | ||
RTE.default.colors = rot, gruen, blau | RTE.default.colors = rot, gruen, blau | ||
RTE.colors { | RTE.colors { | ||
- | rot { | + | |
- | name = Rot | + | name = Rot |
- | value = #FF0000 | + | value = #FF0000 |
- | | + | } |
- | gruen { | + | gruen { |
- | | + | name = Grün |
- | | + | value = #00FF00 |
- | | + | } |
- | | + | blau { |
- | | + | name = Blau |
- | | + | value = #0000FF |
- | | + | } |
} | } | ||
</ | </ | ||
+ | |||
+ | ===== < | ||
+ | |||
+ | ==== formatblock ==== | ||
+ | |||
+ | Mit **TSconfig** können unliebsame Optionen einfach entfernt werden: | ||
+ | |||
+ | < | ||
+ | RTE.default { | ||
+ | buttons.formatblock.removeItems = address, | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ==== blockstyle ==== | ||
+ | |||
+ | Für das select-Menü '' |