Snippets + Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Du befindest dich hier: Home » typo3 » about » rte
Zuletzt angesehen:
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/13 20:55] – [Farbwähler] admintypo3:about:rte [2016/11/18 20:37] (aktuell) – RTE-Dialogfenster anpassen 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 ''enableInlineElements'' aktiviert werden (z.B. ''emphasis'').+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 ''enableInlineElements'' aktiviert werden (z.B. ''emphasis''). Über die TSconfig kann man den RTE auch individuell gestalten.
  
 ---- ----
 +
 +===== Die Ausgabe im Frontend =====
 +
 +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. <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>
- 
-Einige Angaben fügen HTML-Elemente mit Klassen zum Text hinzu, z.B. ''textstyle''. Diese haben zwar Auswirkungen auf die Ansicht im RTE, besitzen aber noch keine CSS-Definitionen für das Frontend. Diese müssen für das FE noch in der eigenen CSS-Datei definiert werden. 
  
 ---- ----
Zeile 32: Zeile 37:
 ^fontsize|Fügt per Inline-Style eine ''font-size''-Angabe hinzu.| ^fontsize|Fügt per Inline-Style eine ''font-size''-Angabe hinzu.|
 ^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 <blockquote> (langes Zitat) hinzu.| 
-^insertparagraphbefore| | +^insertparagraphbefore|Fügt einen (leeren) Absatz ''<p></p>'' vor dem aktuell gewählten Absatz hinzu.| 
-^insertparagraphafter| |+^insertparagraphafter|Fügt einen (leeren) Absatz ''<p></p>'' nach dem aktuell gewählten Absatz hinzu.|
 ^lefttoright|Fügt dem Absatz das Attribut ''dir="ltr"'' hinzu (Textfluss links von nach rechts).| ^lefttoright|Fügt dem Absatz das Attribut ''dir="ltr"'' hinzu (Textfluss links von nach rechts).|
 ^righttoleft|Fügt dem Absatz das Attribut ''dir="rtl"'' hinzu (Textfluss von rechts nach links).| ^righttoleft|Fügt dem Absatz das Attribut ''dir="rtl"'' hinzu (Textfluss von rechts nach links).|
-^language| | +^language|Markiert den gewählten Text als gewählte Sprache.| 
-^showlanguagemarks| |+^showlanguagemarks|(De)aktiviert einen Marker vor Inhalten, die ein Sprachattribut ''lang="xy"'' enthalten.|
 ^left|Fügt dem Element eine Klasse //align-left// hinzu, die im FE noch definiert werden muss.| ^left|Fügt dem Element eine Klasse //align-left// hinzu, die im FE noch definiert werden muss.|
 ^center|Fügt dem Element eine Klasse //align-center// hinzu, die im FE noch definiert werden muss.| ^center|Fügt dem Element eine Klasse //align-center// hinzu, die im FE noch definiert werden muss.|
Zeile 45: 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 ''orderedlist'' oder ''unorderedlist'' ebenfalls aktiviert ist!| 
-^definitionitem| | +^definitionitem|Ermöglicht das Umschalten zwischen Ausdruck und Definition einer Definitionsliste.| 
-^outdent|Entfernt ein <div class="indent">, die zuvor gesetzt wurde.| +^outdent|Entfernt ein ''<div class="indent">'', die zuvor gesetzt wurde.| 
-^indent|Fügt dem Element ein <div class="indent"> (einrücken) hinzu. Das Verschachteln mehrerer dieser Elemente ist möglich.| +^indent|Fügt dem Element ein ''<div class="indent">'' (einrücken) hinzu. Das Verschachteln mehrerer dieser Elemente ist möglich.| 
-^formattext| | +^formattext|Bietet ein Dropdownmenü für Textformatierungen (bold, citation, keyboard, ...).| 
-^bidioverride| | +^bidioverride|Erzwingt die Textrichtung von Fremdsprachen beim ausgewählten Text mit ''<bdo dir="rtl">'', wenn die automatische Ausrichtung nicht funktionieren sollte.| 
-^big|Markiert den Text mit ''<big>''.| +^big|Markiert den gewählten Text mit ''<big>''.| 
-^bold|Fügt ein '<span style="font-weight: bold;"> hinzu.| +^bold|Fügt ein ''<span style="font-weight: bold;">'' hinzu.| 
-^citation| | +^citation|Markiert den gewählten Text mit ''<cite>'' (kurzes Zitat).| 
-^code| | +^code|Markiert den gewählten Text mit ''<code>'' (Quellcode).| 
-^definition| | +^definition|Markiert den gewählten Text mit ''<dfn>'' (Definition eines Begriffs).| 
-^deletedtext|Markiert den Text mit ''<del>''.| +^deletedtext|Markiert den gewählten Text mit ''<del>'' (gelöscht).| 
-^emphasis|Markiert den Text mit ''<em>''.| +^emphasis|Markiert den gewählten Text mit ''<em>'' (betont).| 
-^insertedtext| | +^insertedtext|Markiert den gewählten Text mit ''<ins>'' (hinzugefügt).| 
-^italic|Fügt ein '<span style="font-style: italic;"> hinzu.| +^italic|Fügt ein ''<span style="font-style: italic;">'' hinzu.| 
-^keyboard| | +^keyboard|Markiert den gewählten Text mit ''<kbd>'' (Benutzereingabe).| 
-^monospaced| | +^monospaced|Markiert den gewählten Text mit ''<tt>'' (Festbreitenschrift).| 
-^quotation| | +^quotation|Markiert den gewählten Text mit ''<q>'' (Zitat mit Quellenangabe [<q cite="Quelle">]).| 
-^sample| | +^sample|Markiert den gewählten Text mit ''<samp>'' (Beispiel).| 
-^small|Markiert den Text mit ''<small>''.| +^small|Markiert den gewählten Text mit ''<small>''.| 
-^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| | +^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| |+^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 104: 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 136: Zeile 141:
 ==== Buttons sortieren ==== ==== Buttons sortieren ====
  
-Die Buttons lassen sich in der Reihenfolge neu anordnen und mit Linien, kleinen Abständen und Zeilenumbrüchen sortieren. Buttons, die nicht mit ''showButtons'' aktiviert wurden, werden auch nicht angezeigt. Buttons, die zwar aktiviert wurden, aber nicht in ''toolbarOrder'' gesetzt sind, werden ebenfalls nicht angezeigt.+Die Buttons lassen sich in der Reihenfolge neu sortieren und mit Linien, kleinen Abständen und Zeilenumbrüchen unterteilen. Buttons, die nicht mit ''showButtons'' aktiviert wurden, werden auch nicht angezeigt. Buttons, die zwar aktiviert wurden, aber nicht in ''toolbarOrder'' gesetzt sind, werden ebenfalls nicht angezeigt.
  
 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 183: 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.1392321356.txt.gz · Zuletzt geändert: (Externe Bearbeitung)

Seiten-Werkzeuge