Benutzer-Werkzeuge

Webseiten-Werkzeuge


typo3:about:rte

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige ÜberarbeitungVorherige Überarbeitung
Nächste Überarbeitung
Vorherige Überarbeitung
typo3:about:rte [2014/02/15 17:49] – [CSS im RTE] admintypo3:about:rte [2016/11/18 20:37] (aktuell) – RTE-Dialogfenster anpassen admin
Zeile 9: Zeile 9:
 Einige Angaben fügen HTML-Elemente mit Klassen zum Text hinzu, z.B. ''textstyle''. Diese haben zwar Auswirkungen auf die Ansicht im RTE, nicht aber im Frontend. Hierfür müssen noch Definitionen in der entsprechenden CSS-Datei definiert werden. Einige Angaben fügen HTML-Elemente mit Klassen zum Text hinzu, z.B. ''textstyle''. Diese haben zwar Auswirkungen auf die Ansicht im RTE, nicht aber im Frontend. Hierfür müssen noch Definitionen in der entsprechenden CSS-Datei definiert werden.
  
-Zudem werden einige HTML-Elemente, die dem RTE hinzugefügt wurden (z.B. <code>, <cite>), standardmäßig nicht geparst, wodurch diese Quellcode-Elemente im Frontend ausgegeben werden. Das Parsen dieser Elemente kann jedoch konfiguriert werden.+Zudem werden einige HTML-Elemente, die dem RTE hinzugefügt wurden (z.B. <cite>), standardmäßig nicht geparst, wodurch diese Quellcode-Elemente im Frontend ausgegeben werden (-> <cite>Das Zitat</cite>). Das Parsen dieser Elemente kann jedoch konfiguriert werden.
  
 ===== CSS im RTE ===== ===== 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. 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> <code typoscript>
 RTE.default { RTE.default {
-  contentCSS = fileadmin/template/rte.css +  contentCSS = path/to/rte.css
-  useCSS = 1+
 } }
 </code> </code>
Zeile 70: Zeile 71:
 ^small|Markiert den gewählten Text mit ''<small>''.| ^small|Markiert den gewählten Text mit ''<small>''.|
 ^span|Markiert den gewählten Text mit ''<span>''.| ^span|Markiert den gewählten Text mit ''<span>''.|
-^strikethrough|Fügt ein <span style="text-decoration: line-through;"> hinzu.|+^strikethrough|Fügt ein ''<span style="text-decoration: line-through;">'' hinzu.|
 ^strong|Markiert den gewählten Text mit ''<strong>''.| ^strong|Markiert den gewählten Text mit ''<strong>''.|
-^subscript|Fügt ein <span style="vertical-align: sub;"> hinzu.| +^subscript|Fügt ein ''<span style="vertical-align: sub;">'' hinzu.| 
-^superscript|Fügt ein <span style="vertical-align: super;"> hinzu.| +^superscript|Fügt ein ''<span style="vertical-align: super;">'' hinzu.| 
-^underline|Fügt ein <span style="text-decoration: underline;"> hinzu.|+^underline|Fügt ein ''<span style="text-decoration: underline;">'' hinzu.|
 ^variable|Markiert den gewählten Text mit ''<var>'' (Variable).| ^variable|Markiert den gewählten Text mit ''<var>'' (Variable).|
 ^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 //onmouseover// hinzugefügt werden können.
-^showmicrodata| |+^showmicrodata|ab TYPO3 4.7: (De)aktiviert einen Marker vor Inhalten, die Mikrodaten (//itemscope//, //itemtype// ...) enthalten.|
 ^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, Copyright, etc.).| ^insertcharacter|Bietet eine Auswahl an Sonderzeichen an, die der Benutzer bequem im RTE verwenden kann (Durchmesser, Copyright, etc.).|
-^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 ''<hr />'' ein.| ^line|Fügt an der gewählten Stelle eine Linie mit ''<hr />'' ein.|
 ^link|Ermöglicht das Setzen von Ankern: interne/externe Links, Dateilinks, E-Mails.| ^link|Ermöglicht das Setzen von Ankern: interne/externe Links, Dateilinks, E-Mails.|
-^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 das Anlegen einer Tabelle mit vielen Einstellungsmöglichkeiten.|+^table|Ermöglicht das Anlegen einer Tabelle mit vielen Einstellungsmöglichkeiten.|
 ^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 ''<acronym>''.|
 ^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 108: Zeile 109:
 ^tablerestyle| | ^tablerestyle| |
 ^rowproperties|Zeileneinstellungen anpassen (Breite, Textausrichtung, Rahmen, etc.).| ^rowproperties|Zeileneinstellungen anpassen (Breite, Textausrichtung, Rahmen, etc.).|
-^rowinsertabove|Spalte oben hinzufügen.| +^rowinsertabove|Zeile oben hinzufügen.| 
-^rowinsertunder|Spalte unten hinzufügen.|+^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 links hinzufügen.| 
-^columninsertafter|Zeile rechts hinzufügen.|+^columninsertafter|Spalte rechts hinzufügen.|
 ^columndelete|Gewählte Spalte löschen.| ^columndelete|Gewählte Spalte löschen.|
 ^columnsplit|Gewählte Spalte teilen.| ^columnsplit|Gewählte Spalte teilen.|
Zeile 187: Zeile 188:
   }   }
 } }
 +</code>
 +
 +===== <select> Elemente ausblenden =====
 +
 +==== formatblock ====
 +
 +Mit **TSconfig** können unliebsame Optionen einfach entfernt werden:
 +
 +<code>
 +RTE.default {
 +  buttons.formatblock.removeItems = address,h5,h6,article,footer,header,nav,section,aside,div
 +}
 +</code>
 +
 +==== blockstyle ====
 +
 +Für das select-Menü ''blockstyle'' gibt es hierzu kein TSconfig! Was aber die Lösung bringt: In der **CSS** des RTE einfach die nicht gewünschten Klassen entfernen.
 +
 +----
 +
 +==== RTE-Dialogfenster anpassen ====
 +
 +Mit dem folgenden Snippet lässt sich die Fenstergröße des Link Wizards anpassen.
 +
 +**Page TSconfig:**
 +<code typoscript>
 +RTE.default { 
 +    buttons.link.dialogueWindow.width = 750 
 +    buttons.link.dialogueWindow.height = 750 
 +    buttons.link.dialogueWindow.positionFromTop = 10 
 +    buttons.link.dialogueWindow.positionFromLeft = 10 
 +
 </code> </code>
typo3/about/rte.1392482955.txt.gz · Zuletzt geändert: 2015/12/03 19:29 (Externe Bearbeitung)