Benutzer-Werkzeuge

Webseiten-Werkzeuge


typo3:about:rte

Dies ist eine alte Version des Dokuments!


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.


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.

RTE.default {
  contentCSS = fileadmin/template/rte.css
  useCSS = 1
}

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.


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.
blockquote
insertparagraphbefore
insertparagraphafter
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).
language
showlanguagemarks
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.
definitionlist
definitionitem
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.
formattext
bidioverride
bigMarkiert den Text mit <big>.
boldFügt ein '<span style=„font-weight: bold;“> hinzu.
citation
code
definition
deletedtextMarkiert den Text mit <del>.
emphasisMarkiert den Text mit <em>.
insertedtext
italicFügt ein '<span style=„font-style: italic;“> hinzu.
keyboard
monospaced
quotation
sample
smallMarkiert den Text mit <small>.
span
strikethroughFügt ein <span style=„text-decoration: line-through;“> hinzu.
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.
variable
textcolorBietet eine Auswahl an Textfarben.
bgcolorBietet eine Auswahl an Hintergrundfarben.
textindicatorZeigt die aktuelle Formatierung des gewählten Textes an.
editelement
showmicrodata
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.).
insertsofthyphen
lineFügt an der gewählten Stelle eine Linie mit <hr /> ein.
linkErmöglicht das Setzen von Ankern: interne/externe Links, Dateilinks, E-Mails.
unlink
imageErmöglicht das Einbetten von Bildern im RTE.
tableErmgölicht 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).
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.).
rowinsertaboveSpalte oben hinzufügen.
rowinsertunderSpalte unten hinzufügen.
rowdeleteGewählte Zeile löschen.
rowsplitGewählte Zeile teilen.
columnproperties
columninsertbeforeZeile links hinzufügen.
columninsertafterZeile 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 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.

Schlüsselwörter zur Unterteilung:
space → kleiner Abstand (mehrere hintereinander folgende haben keine Auswirkung auf den Größ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
  }
}
typo3/about/rte.1392327212.txt.gz · Zuletzt geändert: 2015/12/03 19:29 (Externe Bearbeitung)