Bilder

Ein Bild wird durch Klick auf den Bild-Button (16) an der Cursorposition eingefügt. Durch Rechtsklick auf das Bild erscheint ein Kontextmenü und durch Klick auf „Bildeigenschaften“ öffnet sich das Fenster für die Bildkonfiguration. Ähnlich wie bei Links lassen sich hier die Details wie Rand, Titel und Alternativtext eingeben. Durch die Wahl eines „Zauberbilds“ werden die Bildbearbeitungs-Features von TYPO3 eingeschaltet, mit denen es möglich ist, die Bildgröße zu ändern.

Tabellen

Auch bei Tabellen wiederholt sich das eben beschriebene Muster: Durch Klick auf den Tabellen-Button (17) wird an der Cursorposition eine Tabelle eingefügt. Es erscheint ein Fenster mit den Proportionen der Tabelle. Durch Klick auf den „Tabellenrand-anzeigen“-Button (18) können die einzelnen Tabellenzellen optisch hervorgehoben werden.

CSS-Stile

Ein Ansatz, um die CSS-Stile des Editors mit denen der Frontend-Seiten zu verknüpfen, ist das Stylesheet des Editors mit in die Frontendseite zu laden. Damit können die im Editor benutzbaren Stile auch den Inhalt der Webseitendarstellung formatieren. Dazu zählen im Besonderen die Textausrichtungs-Stile des Editors (z. B. linksbündiger Text). Nachdem die CSS-Datei des Editors für das Frontend und den Editor benutzt wird, wird im zweiten Schritt die CSS-Datei so angepasst, dass der Inhalt im Editor genauso aussieht wie auf den Frontend-Seiten.

Die CSS-Stile für den Editor lädt die Extension aus der CSS-Datei typo3conf/ext/rtehtmlarea/htmlarea/plugins/DynamicCSS/dynamiccss.css. Diese kann zum Beispiel über TypoScript in die Webseite eingebunden werden.

page.includeCSS{
 file1 = fileadmin/mystylesheet.css
 file2 = typo3conf/ext/rtehtmlarea/htmlarea/plugins/DynamicCSS/dynamiccss.css
}

Jetzt können die Stile des Editors im Frontend benutzt werden. Durch Einfügen der folgenden CSS-Zeilen in die dynamiccss.css-Datei können eigene Stile erzeugt werden.