Benutzer-Werkzeuge

Webseiten-Werkzeuge


typo3:about:rte

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). Ü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

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!

RTE.default {
  contentCSS = path/to/rte.css
}

Buttons

Die RTE-Buttons lassen sich einzeln ein- und ausblenden und neu sortieren. Diese Einstellungen werden in der Page TSconfig vorgenommen.

Button-Übersicht

blockstylelabelBezeichnung vor dem Blockstil-Dropdownmenü.
blockstyleFügt dem Absatz den gewählten Klassennamen zu.
Achtung: Es können mehrere Klassen nacheinander ausgewählt werden, die sich im Frontend ungewünscht ergänzen könnten (z.B. zwei verschiedene Rahmen oder Ausrichtungen). Mit remove block style bzw. no block style können die Klassen nacheinander wieder entfernt werden.
textstylelabelBezeichnung vor dem Textstil-Dropdownmenü.
textstyleFügt dem Text ein span mit dem gewählten Klassennamen zu.
fontstyleFügt per Inline-Style eine font-family-Angabe hinzu.
fontsizeFügt per Inline-Style eine font-size-Angabe hinzu.
formatblockFormatiert 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.
blockquoteFügt ein <blockquote> (langes Zitat) hinzu.
insertparagraphbeforeFügt einen (leeren) Absatz <p></p> vor dem aktuell gewählten Absatz hinzu.
insertparagraphafterFügt einen (leeren) Absatz <p></p> nach dem aktuell gewählten Absatz hinzu.
lefttorightFügt dem Absatz das Attribut dir=„ltr“ hinzu (Textfluss links von nach rechts).
righttoleftFügt dem Absatz das Attribut dir=„rtl“ hinzu (Textfluss von rechts nach links).
languageMarkiert den gewählten Text als gewählte Sprache.
showlanguagemarks(De)aktiviert einen Marker vor Inhalten, die ein Sprachattribut lang=„xy“ enthalten.
leftFügt dem Element eine Klasse align-left hinzu, die im FE noch definiert werden muss.
centerFügt dem Element eine Klasse align-center hinzu, die im FE noch definiert werden muss.
rightFügt dem Element eine Klasse align-right hinzu, die im FE noch definiert werden muss.
justifyfullFügt dem Element eine Klasse align-justify hinzu, die im FE noch definiert werden muss.
orderedlistFügt eine nummerierte Liste hinzu.
unorderedlistFügt eine unsortierte Liste hinzu.
definitionlistErmöglicht das Anlegen einer Definitionsliste. Der Button wird nur angezeigt, wenn orderedlist oder unorderedlist ebenfalls aktiviert ist!
definitionitemErmöglicht das Umschalten zwischen Ausdruck und Definition einer Definitionsliste.
outdentEntfernt ein <div class=„indent“>, die zuvor gesetzt wurde.
indentFügt dem Element ein <div class=„indent“> (einrücken) hinzu. Das Verschachteln mehrerer dieser Elemente ist möglich.
formattextBietet ein Dropdownmenü für Textformatierungen (bold, citation, keyboard, …).
bidioverrideErzwingt die Textrichtung von Fremdsprachen beim ausgewählten Text mit <bdo dir=„rtl“>, wenn die automatische Ausrichtung nicht funktionieren sollte.
bigMarkiert den gewählten Text mit <big>.
boldFügt ein <span style=„font-weight: bold;“> hinzu.
citationMarkiert den gewählten Text mit <cite> (kurzes Zitat).
codeMarkiert den gewählten Text mit <code> (Quellcode).
definitionMarkiert den gewählten Text mit <dfn> (Definition eines Begriffs).
deletedtextMarkiert den gewählten Text mit <del> (gelöscht).
emphasisMarkiert den gewählten Text mit <em> (betont).
insertedtextMarkiert den gewählten Text mit <ins> (hinzugefügt).
italicFügt ein <span style=„font-style: italic;“> hinzu.
keyboardMarkiert den gewählten Text mit <kbd> (Benutzereingabe).
monospacedMarkiert den gewählten Text mit <tt> (Festbreitenschrift).
quotationMarkiert den gewählten Text mit <q> (Zitat mit Quellenangabe [<q cite=„Quelle“>]).
sampleMarkiert den gewählten Text mit <samp> (Beispiel).
smallMarkiert den gewählten Text mit <small>.
spanMarkiert den gewählten Text mit <span>.
strikethroughFügt ein <span style=„text-decoration: line-through;“> hinzu.
strongMarkiert den gewählten Text mit <strong>.
subscriptFügt ein <span style=„vertical-align: sub;“> hinzu.
superscriptFügt ein <span style=„vertical-align: super;“> hinzu.
underlineFügt ein <span style=„text-decoration: underline;“> hinzu.
variableMarkiert den gewählten Text mit <var> (Variable).
textcolorBietet eine Auswahl an Textfarben.
bgcolorBietet eine Auswahl an Hintergrundfarben.
textindicatorZeigt die aktuelle Formatierung des gewählten Textes an.
editelementErmöglicht ein Menü, mit dem einem Element Attribute wie id, lang und onmouseover hinzugefügt werden können.
showmicrodataab TYPO3 4.7: (De)aktiviert einen Marker vor Inhalten, die Mikrodaten (itemscope, itemtype …) enthalten.
emoticonBietet eine Auswahl von 16 Smilies an, die von TYPO3 mitgeliefert werden.
insertcharacterBietet eine Auswahl an Sonderzeichen an, die der Benutzer bequem im RTE verwenden kann (Durchmesser, Copyright, etc.).
insertsofthyphenab TYPO3 4.7: Ermöglicht das Setzen eines weichen Trennzeichens (Worttrennung durch den Browser an den angegebenen Stellen).
lineFügt an der gewählten Stelle eine Linie mit <hr /> ein.
linkErmöglicht das Setzen von Ankern: interne/externe Links, Dateilinks, E-Mails.
unlinkEntfernt einen zuvor gesetzten Anker.
imageErmöglicht das Einbetten von Bildern im RTE.
tableErmöglicht das Anlegen einer Tabelle mit vielen Einstellungsmöglichkeiten.
userErmöglicht die Verwendung selbst erstellter HTML-Elemente. Diese müssen noch erstellt werden, sonst ist das Feld leer (siehe unten).
acronymMarkiert den gewählten Text mit <acronym>.
findreplaceErmöglicht das Suchen und Ersetzen von Wörtern und Wortteilen.
spellcheckErmöglicht eine Rechtschreibprüfung. Hierzu muss allerdings noch zusätzliches in TYPO3 installiert werden (z.B. aspell), vorher wird der Button nicht angezeigt.
chModeZwischen RTE-Ansicht und Quelltext wechseln.
inserttagEiner Textauswahl ein HTML-Element mit Attributen hinzufügen.
removeformatErmöglicht das Entfernen verschiedener Formatierungen, z.B. MS Word.
copyAuswahl kopieren.
cutAuswahl ausschneiden.
pasteAuswahl einfügen.
pastetoggleDas Einfügen ohne Formatierungen ein-/ausschalten.
pastebehaviour
undoWiderrufen von Arbeitsschritten.
redoWiederherstellen von Arbeitsschritten.
aboutZeigt den Hinweis über die RTE-Version mit Browser-Support etc. an.
togglebordersTabellenränder im RTE ein-/ausblenden.
tablepropertiesTabelleneinstellungen anpassen (Breite, Textausrichtung, Rahmen, etc.).
tablerestyle
rowpropertiesZeileneinstellungen anpassen (Breite, Textausrichtung, Rahmen, etc.).
rowinsertaboveZeile oben hinzufügen.
rowinsertunderZeile unten hinzufügen.
rowdeleteGewählte Zeile löschen.
rowsplitGewählte Zeile teilen.
columnpropertiesSpalteneinstellungen anpassen.
columninsertbeforeSpalte links hinzufügen.
columninsertafterSpalte rechts hinzufügen.
columndeleteGewählte Spalte löschen.
columnsplitGewählte Spalte teilen.
cellpropertiesZelleneinstellungen anpassen (Breite, Textausrichtung, Rahmen, etc.).
cellinsertbeforeZelle links hinzufügen.
cellinsertafterZelle rechts hinzufügen.
celldeleteEinzelne gewählte Zelle löschen.
cellsplitEine Zelle aufteilen.
cellmergeZellen verbinden (vorhandene Zellen werden verschoben, nicht überschrieben). Zwei Abfragen: column, row.

Buttons ein-/ausblenden

# Kommaseparierte Liste aller möglichen Werte:
blockstylelabel, blockstyle, textstylelabel, textstyle, fontstyle, fontsize, formatblock, blockquote, insertparagraphbefore, insertparagraphafter, lefttoright, righttoleft, language, showlanguagemarks, left, center, right, justifyfull, orderedlist, unorderedlist, definitionlist, definitionitem, outdent, indent, formattext, bidioverride, big, bold, citation, code, definition, deletedtext, emphasis, insertedtext, italic, keyboard, monospaced, quotation, sample, small, span, strikethrough, strong, subscript, superscript, underline, variable, textcolor, bgcolor, textindicator, editelement, showmicrodata, emoticon, insertcharacter, insertsofthyphen, line, link, unlink, image, table, user, acronym, findreplace, spellcheck, chMode, inserttag, removeformat, copy, cut, paste, pastetoggle, pastebehaviour, undo, redo, about, toggleborders, tableproperties, tablerestyle, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columnproperties, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
RTE.default {
  showButtons := addToList(pastetoggle,insertcharacter)
  hideButtons = deletedtext
}

Buttons sortieren

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:
space → kleiner Abstand (mehrere hintereinander folgende haben keine Auswirkung auf die Abstandgröße)
bar → Trennlinie
linebreak → Zeilenumbruch

RTE.default {
  toolbarOrder = bold, italic, bar, left, center, right, justifyfull, linebreak, undo, redo, chMode
}

Button-Definitionen anpassen

Die Basiskonfiguration kann nach Belieben verändert oder ergänzt werden. So kann man andere Schriften, Farben oder Rahmen für den Anwender bereitstellen.

Farbwähler

Der Farbwähler hat eine voreingestellte Liste von 72 Farben sowie ein Feld zur Eingabe von eigenen Farben im Hexadezimalwert. Er kann um eigene Farben ergänzt werden.

# Button für Textfarbe hinzufügen, ohne die bestehende Liste der Buttons zu überschreiben.
RTE.default.showButtons := addToList (textcolor)
 
# Standardfarben ausblenden. Ist nicht zwingend notwendig, um eigene Farben zu definieren.
RTE.default.disableColorPicker = 1
 
# Farben mit Hexadezimalwert anlegen. Die Farbnamen sind frei wählbar.
RTE.default.colors = rot, gruen, blau
RTE.colors {
  rot {
    name = Rot
    value = #FF0000
  }
  gruen {
    name = Grün
    value = #00FF00
  }
  blau {
    name = Blau
    value = #0000FF
  }
}

<select> Elemente ausblenden

formatblock

Mit TSconfig können unliebsame Optionen einfach entfernt werden:

RTE.default {
  buttons.formatblock.removeItems = address,h5,h6,article,footer,header,nav,section,aside,div
}

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:

RTE.default { 
    buttons.link.dialogueWindow.width = 750 
    buttons.link.dialogueWindow.height = 750 
    buttons.link.dialogueWindow.positionFromTop = 10 
    buttons.link.dialogueWindow.positionFromLeft = 10 
} 
typo3/about/rte.txt · Zuletzt geändert: 2016/11/18 20:37 von admin