Schnellnavigation:

Kategorien

Schlagwortwolke

api typoscript seo rte extension backend css templavoila facebook sprachen extensions gifbuilder datenbank google fce redaktion php menü hyphen ie6 formular security constants slide webfonts silbentrennung twitter typo3-camp tceform t3c tca tag t3blog sql sprachmenü tcadefaults suchmaschine suchtipps typo3camp
« September 2010»
S M T W T F S
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    

Letzte Nachrichten

DSGVO
26.05.2018 18:39
Trackingtools und Datenschutzerklärung
14.03.2014 23:07
1:n und n:1 Relationen in Extbase
06.12.2013 12:04
Erste Abmahnungen wegen Google Analytics
04.10.2013 12:11

Kopieren Sie diesen Link in Ihren RSS-Reader

RSS 0.91Nachrichten
Kommentare
RSS 2.0Nachrichten
Kommentare

In eigener Sache

Peter Linzenkirchner, Lisardo EDV Beratung in Augsburg. Freelance und Partner für Design- und Webagenturen in Augsburg und München. Pixelgenaue Templates, valides HTML, barrierearm. TYPO3-Projekte, Extension-Programmierung und mehr ... 

02September2010

RTE (htmlArea) einrichten

Seit Version 4 von Typo3 ist der Rich Text Editor »htmlArea RTE (rtehtmlarea)« fester Bestandteil der Typo3-Installation. Ich beziehe mich im folgenden auf diesen RTE, nicht auf den älteren.

Nach der Installation muss der RTE konfiguriert werden.

Grundeinstellungen, vor allem zum Bildupload

Standardmäßig ist der Bildupload innerhalb des RTE nicht aktiv. Man muss im Extensionsmanager htmlArea öffnen und dort die Option »Enable images in the RTE« aktivieren. Es sind gibt weitere interessante Grundeinstellungen: DAM media Browser einschalten, Accessability-Icons für Links aktivieren und so weiter.

Sehr wichtig sind die »Default configuration settings«: damit wird festgelegt, welche grundlegende Set an Möglichkeiten und Werkzeugen standardmäßig und ohne weitere Konfiguration zur Verfügung stehen. Normalerweise wird bei der Installation »Typical« eingestellt; die beiden anderen erfordern in jedem Fall zusätzlich eine manuelle Konfiguration im TSconfig.

Konfiguration im Page TSconfig

  1. ########## Grundeinstellungen ##########
  2. RTE.default{

  1.   useCSS=1
  2.   ignoreMainStyleOverride=0
  3.  
  4.   # Damit kann die übermäßig große Schriftdarstellung in den Tabellen
  5.   # im Firefox korrigiert werden. Ausserdem ist es möglich, die grundlegende
  6.   # Darstellung im RTE-Eingabefenster zu konfigurieren: Schrift, Schrifgrößen etc.
  7.   mainStyleOverride_add.TD=font-size:12px;
  8.   mainStyleOverride_add.H1=font-size:16px;color:#a7b198;
  9.   mainStyleOverride_add.H2=font-size:16px;color:#a7b198;
  10.  
  11.   # Überschreiben der Default-Einstellungen zu den erlaubten Tags
  12.   proc.allowTags=code,table,tbody,tr,th,td,h1,h2,h3,h4,h5,h6,div,p,br,span,ul,ol,li,pre,blockquote,strong,em,b,i,u,sub,sup,strike,a,link,img,nobr,hr,center,font,tt,q,cite
  13.   proc.entryHTMLparser_db.allowTags<RTE.default.proc.allowTags
  14.   proc.entryHTMLparser_db.tags.a.fixAttrib.title.unset =1
  15.   # das ist nicht unbedingt erforderlich, wenn man in den »Default
  16.   # configuration settings« die Option »Typical gewählt hat«. Wenn
  17.   # man eine der anderen beiden eingestellt hat, muss man diese Zeile anpassen. 
  18.  
  19.   # Welche Buttons sollen im RTE gezeigt werden?
  20.   showButtons= *
  21.   hideButtons=strikethrough,lefttoright,righttoleft
  22.   keepButtonGroupTogether=1
  23.  
  24.   # wenn den Redakteuren eigene Klassen zur Verfügung gestellt werden, müssen
  25.   # diese in einem Stylesheet extra dem RTE zur Verfüung gestellt werden.
  26.   contentCSS=fileadmin/css/screen/content_rte.css
  27.  
  28.   # nur Klassen mit Tags erlauben. z. B. : p.klasse {border:1px solid #ccc}
  29.   showTagFreeClasses=0
  30.  
  31.   # hier wird definiert, welche Klassen den Redakteuren zur
  32.   # Verfügung gestellt werden: die vorhandenen Klassen für die
  33.   # Zeichenformatierung werden hier ausgeschaltet:
  34.   classesCharacter=
  35.   # die vorhandenen Klassen zum Formatieren von Absätzen werden
  36.   # durch die selbstdefinierten Klassen überschrieben:
  37.   classesParagraph=linie_danach,linie_davor,kasten_gruen_hg
  38.   # Tipp: wenn die default-Klassen übernommen und nur ergänzt
  39.   # werden sollen, dann so schreiben:
  40.   # classesParagraph := linie_danach ...
  41.  
  42.   # Klassendefinition für die gesamte Tabelle
  43.   classesTable=tabelle01
  44.   # Klassendefinition für die einzelnen Zellen
  45.   classesTD=zelle01,zelle02
  46.   # das kann für tr, thead, tbody ebenfalls gemacht werden
  47.  
  48.   # Jetzt müssen die einzelnen Klassen noch explizit erlaubt werden
  49.   proc.allowedClasses=linie_danach,linie_davor,kasten_gruen_hg,tabelle01,zelle01,zelle02
  50.  
  51.   # Schriften erlauben
  52.   fontFace=font1,font2
  53.  
  54.   # Farben erlauben
  55.   colors=color1,color2
  56. }
  57.  
  58. ############ Achtung!! ###############
  59. # Alle selbstdefinierten Klassen müssen in dem oben eingebundenen
  60. # Stylesheet auch definiert sein!
  61. # Dabei muss beachtet werden, dass Tag-lose Klassen durch showTagFreeClasses = 0
  62. # ausgeschaltet wurden:
  63. # Falsch: .linie_danach {border-bottom: ...}
  64. # Richtig: p.linie_danach {border-bottom: ...}
  65. # Genauso bei den Tabellen.
  66. #######################################
  67.  
  68.  
  69. ########### Definition der Klassenbezeichnungen für die Redakteure
  70.  
  71. RTE.classes {
  72.   # hier werden die Namen der Klassen »lesbar« gemacht
  73.   linie_davor.name=Linie davor
  74.   linie_danach.name=Linie danach
  75.   kasten_gruen_hg.name=Kasten:grüner HG
  76.   kasten_gruen_r.name=Kasten:grüner Rahmen
  77.   kasten_info.name=Kasten:Info-Knopf
  78.   tabelle01.name=Standard in Blau-Grau
  79.   zelle01.name=Zellen blauer Hintergrund
  80.   zelle02.name=Zellen ohne Hintergrund
  81.   zelle03.name=Zellen grauer Hintergrund
  82.  
  83.   # Wenn man will kann man die Anzeige der Klassen in den Menüs für die
  84.   # Redakteure auch noch optisch anpassen:
  85.   linie_davor.name=Linie davor
  86.   linie_davor.value=border-bottom:1x solid#ff0000
  87.   # damit erscheint der Eintrag im Menü schon so formatiert, wie
  88.   # später der Absatz. Nötig ist das aber nicht.
  89.  
  90. }
  91.  
  92. ############# Definition de Schriftmenüs ###########
  93.  
  94. RTE.fonts {
  95.   font1 {
  96.     name=Verdana
  97.     value=verdana,arial,helvetica,sans-serif
  98.   }
  99.   font2 {
  100.     name=Georgia
  101.     value=georgia,times,'times new roman',serif
  102.   }
  103. }
  104.  
  105. ########### Definition des Farbmenüs ##############
  106.  
  107. RTE.colors {
  108.   color1 {
  109.     name=t3 blau
  110.     value=#0000ff
  111.   }
  112.   color2 {
  113.     name=t3 grün
  114.     value=#00ff00
  115.   }
  116. }
  117.  
  118. ########### Definition der Link-Klassen ##############
  119.  
  120. RTE.classesAnchor {
  121.   externalLink {
  122.     class =ext-link
  123.     type=url
  124.     image=fileadmin/icons/ext-link.gif
  125.   }
  126.   externalLinkInNewWindow {
  127.     class =ext-link2
  128.     type=url
  129.     image=fileadmin/icons/ext-link2.gif
  130.   }
  131.   internalLink {
  132.     class =int-link
  133.     type=page
  134.     image=fileadmin/icons/int-link.gif
  135.   }
  136.   internalLinkInNewWindow {
  137.     class =int-link2
  138.     type=page
  139.     image=fileadmin/icons/int-link2.gif
  140.   }
  141.   download {
  142.     class =download
  143.     type=file
  144.     image=fileadmin/icons/down.gif
  145.   }
  146.   mail {
  147.     class =mail
  148.     type=mail
  149.     image=fileadmin/icons/mail.gif
  150.   }
  151. }

Achtung Browsercache!

Die Arbeit mit dem RTE hat einige Tücken. Wird das Stylesheet für die selbstdefinierten Klassen geändert, so nimmt dies der RTE erst zur Kenntnis, wenn die Stylesheetdatei erneut geladen und so der Browsercache überschrieben wird. In den älteren TYPO3-Versionen war der einfachste Weg, das Stylesheet direkt im Browser zu öffnen und nach jeder Änderungen mit gedrückter Umschalt-Taste neu zu laden. Dann wurde das Stylesheet im Browsercache aktualisiert und der RTE hat eine Chance, die geänderten Inhalte zu sehen und darauf zu reagieren. Seit Version 4.3 gibt es eine eigene Option zum Löschen des RTE-Cache. 

Tipps

Die Erweiterung »css_styled_content« bereinigt das HTML, das der RTE ans Frontend übergibt. Dort ist zum Beispiel geregelt, dass eine Tabelle nur die Klasse »contenttable« tragen darf. Wenn Sie also den Redakteuren ermöglichen wollen, Tabellen mit eigenen Klassen zu versehen, so müssen Sie folgenden Code in das TypoScript-Setup Ihrer Seite eingeben (Achtung: nicht ins Page TSConfig!):

  1. ############# nötig, damit der RTE Klassen an Tabellen hängt ########
  2. lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list >

Diese Einstellung hat aber einen Nebeneffekt: wenn im RTE zum Zeitpunkt des Sicherns die Rahmenansicht für Tabellen aktiviert war, steht anschließend im Quellcode:

  1. <tableclass="htmlarea-showtableborders eigeneKlasse">

Das ist zwar nicht schön, schadet aber auch nicht. Man kann es vermeiden, indem man vor dem Speichern imRTE die Rahmen der Tabellen abschaltete – aber das würde ich meinen Redakteuren lieber nicht erklären :-)

Es gibt noch eine Reihe weiterer Einstellungen, mit denen »css_styled_content« in den Output des RTEeingreift; sie sind alle in lib.parseFunc_RTE zu finden. Am einfachsten über den TypoScript Objectbrowser. Das betrifft zum Beispiel die Ausgabe der Tabelleninhalte, die von lib.parseFunc_RTE mit einem p-Tag umgebenwerden:

  1. # Ausschalten der p-Tags für alleinstehende Zeilen
  2. lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.nonWrappedTag=p

Ich ziehe es vor, einfach über die CSS-Stile diese Absätze mit Rand 0 zu versehen, dann stören diese p-Tags nicht; aber wer diese Tags raus haben will, kann obige Zeile verwenden und das p am Ende einfach weglassen. Man muss sich dann aber im Klaren sein, dass dies für alle Texte ohne expliziten Tag gibt.

Man kann die p-Tags in den Tabellenzellen auch so abschalten:

  1. # #wichtig, damit die nicht in p gewrappt werden
  2. lib.parseFunc_RTE.externalBlocks=ul,ol,table
  3. #nochmaliges parsen von tabellenzellen auschalten, damit inhalte nicht wieder in p gepackt werden
  4. lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default.callRecursive=0

Jetzt wird allerdings auch das Parsen der Links abgeschaltet; wenn man Links in den Tabellenzellenbenötigt, dann sollte der Code noch so ergänzt werden:

  1. #nachträgliches Ermöglichen von Links in Tabellenzellen
  2. lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default.stdWrap.parseFunc {
  3.         makelinks=1
  4.         makelinks.http.keep=scheme,path,query
  5.         makelinks.mailto.keep=path
  6.         tags {
  7.                 link=TEXT
  8.                 link {
  9.                 current=1
  10.                 typolink.parameter.data=parameters:allParams
  11.                 }
  12.       }
  13. }

Quelle: sk-typo3.de

  1. # Ausschalten der p-Tags für alleinstehende Zeilen
  2. lib.parseFunc_RTE.externalBlocks=ul,ol,table

Über die obige Konfiguration werden Icons für die Links definiert. Wenn man die voreingestellten Icons deaktivieren will, hilft dieser Code:

  1. RTE.classesAnchor {
  2.         externalLink.image>
  3.         internalLink.image>
  4.         internalLinkInNewWindow.image>       
  5.         download.image>
  6.         mail.image>
  7. }

Um zu erreichen, dass der RTE Bilder nicht in einen p-Tag packt, hilft dieser Code:

  1. RTE.default.proc.allowTagsOutside=img,hr

Die Größe des RTE-Fensters definieren

Die Größe des RTE-Fensters in der normalen Darstellung (also nicht in der Volldarstellung) ist standardmäßig auf 530px Breite und 380 Pixel Höhe festgelegt. Man kann die Größe des RTE-Fensters überschreiben, allerdings ist das etwas unbequem.

Die Höhe kann im Seiten-TSconfig festgelegt bzw. überschrieben werden:

  1. RTE.default.RTEHeightOverride=750

Leider geht das nicht mit der Breite; diese kann nur im USER-TSconfig verändert werden. Man muss also mindestens eine Benutzergruppe anlegen (z. B. speziell für die RTE-Benutzer) und dieser z. B. dieses USER-TSconfig mitgeben:

  1. options.RTESmallWidth=650
  2. options.RTESmallHeight=750

Weiterführende Links

    • Manual auf Typo3.org Hinweis: das Manual ist nicht auf dem üblichen Weg zu finden; die Extension gehört zwar mittlerweile zur Standardinstallation, aber sie wird in der Core-Dokumentation gelistet. Es gibt deshalb eine eigene Extension nur für das Manual von htmlArea RTE.
    • Transformatione Erläuterung der erforderlichen Transformationen, die zwischen Datenbank und RTE stattfinden (müssen)
    • HTMLParser Abschnitt über die function HTMLparser in TSref.
    • Artikel Dynamisches CSS mit htmlArea RTE der Usergroup NRW. Das finde ich sehr informativ; hier gibt es noch eine Reihe weiterer Tipps.
    • eine interessante Beispielkonfiguration aus dem typo3.net-Forum von ms_k
    • Eine sehr ausführliche Anleitung gibts bei site42: Wie konfiguriert man den RTE htmlArea?. Das ist schon fast eine Übersetzung des Manuals – sehr empfehlenswert.
    • TYPO3 und der RTE, ein deutschsprachiges Wiki zur Konfiguration des RTE, empfehlenswert vor allem der Artikel über die TYPO3 RTE API
    Kategorien: Backend  
    Links:
    Trackback-Link  (Bitte kopieren)
    Tags htmlarea, rte
     
    | Mehr
    •  
    • Kommentare
    •