Kategorien
- [-]Developer (104)
- API (15)
- Backend (17)
- Extensions (29)
- HTML & CSS (4)
- Typoscript (33)
- [-]Redaktionelles (21)
- Anleitungen (9)
- Tipps (8)
- [-]Sonstiges (50)
- SEO (8)
Schlagwortwolke
« | April 2024 | » | ||||
---|---|---|---|---|---|---|
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
Letzte Kommentare
- Das liegt daran, dass die captcha.php versucht, das halbe...
- 05.12.2017 00:41
- Hallo, danke für den tollen Beitrag. Kann man die...
- 22.10.2015 10:05
- Vielen Dank für den Austausch guter Artikel. Es ist eine...
- 17.08.2015 10:58
- Hallo Peter, danke für die Extension. Ich habe sie auf...
- 27.08.2014 12:51
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 ...
Zur Zeit wird gefiltert nach: Backend
Filter zurücksetzen
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.
[mehr]
TCEFORM: Inhaltselemente im Backend formatieren
Die Optionen aller Eingabefelder im Backend können modifizert (= geändert oder erweitert) werden. Prinzipiell ist die Syntax:
- TCEFORM.[tablename].[field] {
- # Feld komplett entfernen:
- disabled=1
- # Item entfernen
- removeItems=1,2,3
- # Item hinzufügen (Achtung: erfordert für das Frontend noch TypoScript im Template!)
- addItems.[itemValue]=100,101
- # Umbenennen
- altLabels.[item_value]=ein ganz neuer Name
- }
Leider gibt es keine Dokumentation, welche Optionen für welches Feld zur Verfügung stehen und wie diese im Frontend ausgegeben werden. Das kann man wohl am einfachsten aus dem Quelltext des Eingabeformulars im Backend entnehmen. Für das Frontend kenne ich im Moment nur die Möglichkeit, es auszutesten bzw im Falle von tt_content das TypoScript von css_styled_content durchzusehen.
Bezeichnungen der Headline-Layouts ändern:
Ins TSconfig der der Seite folgendes eintragen:
- TCEFORM.tt_content {
- # ausblenden
- header_layout.removeItems=1,4,5,100
- # mit anderem Namen versehen
- header_layout.altLabels.0=Ebene 1,H1
- header_layout.altLabels.2=Ebene 2,H2
- header_layout.altLabels.3=Ebene 3,H3
- }
Falls H1 nicht genutzt werden soll, muss die Default-Einstellung noch geändert werden, bzw. die Ausgabe für header_layout.altLabels.0. Das geht über folgende Eingabe im Constants-Bereich des TypoScript-Templates:
- # Voreinstellunge auf Headline <h3>
- content.defaultHeaderType=3
Rahmenoptionen umbenennen:
- TCEFORM.tt_content {
- # Rahmenoptionen im Bereich Typ
- section_frame {
- # neue Labels
- altLabels {
- 10=Kasten
- 5=Linie davor
- 6=Linie danach
- 11=BoxBlau
- 12=BoxGrau
- }
- # ausblenden
- removeItems=1,20,21
- }
- }
Neue Rahmenoptionen hinzufügen
Das ist etwas aufwändiger, da hierzu auch das TypoScript von tt_content verändert werden muss. Erster Schritt im TSconfig der Seite:
- # neuer Rahmen dazu
- TCEFORM.tt_content.section_frame {
- addItems.100=Mal ganz anders
- }
Danach im TypoScript-Template:
- tt_content.stdWrap.innerWrap.cObject= CASE
- tt_content.stdWrap.innerWrap.cObject {
- 100=TEXT
- 100.value= <div class="mal-ganz-anders">|</div>
- }
Danach ganz normal in der CSS-Datei formatieren.
ACHTUNG: Das funktioniert seit TYPO3 4.3 nicht mehr; hier wurde css_styled_content etwas verändert. Man kann zwar die alte Fassung als static_content in das Template laden, aber besser ist es, es auf die neue Art zu machen:
- tt_content.stdWrap.innerWrap.cObject {
- # Definitionen zuweisen
- 100=<tt_content.stdWrap.innerWrap.cObject.default
- # Klasse zuweisen
- 100.15.value=mal-ganz-anders
- }
Das hat auch den Vorteile, dass die Abstände oben und unten funktionieren.
Weiterführende Links:
Custom Tags im RTE
In der Grundkonfiguration entfernt der RTE eine Reihe von nicht erwünschten Tags. Je nach eingestellter Grundkonfiguration erhält er eigene Tags, löscht diese oder wandelt sie in Entities um. Um eigene Tags zu ermöglichen, sollte deshalb der Konfiguration des RTE einiges hinzugefügt werden.
- RTE.default.proc.allowTags:=addToList(sondertag)
- RTE.default.proc.allowTagsOutside:=addToList(sondertag)
- RTE.default.proc.entryHTMLparser_db.allowTags<RTE.default.proc.allowTags
Anstatt der Schreibweise := addToList(sondertag) können natürlich auch alle Tags aufgeführt werden, z. B. so:
- RTE.default.proc {
- allowTags(
- a,abbr,acronym,b,bdo,blockquote,br,cite,code,col,colgroup,del,dfn,div,em,
- h1,h2,h3,h4,h5,h6,hr,i,img,li,ol,p,span,strike,strong,sub,sup,
- table,thead,tbody,tfoot,td,tr,th,ul,sondertag,
- )
- }
Das ist natürlich umständlicher, aber man weiss genau, was man erlaubt hat und was nicht.
Damit der Tag im Frontend ausgegeben wird, muss zusätzlich im TypoScript des Templates noch folgendes hinzugefügt werden:
- lib.parseFunc_RTE.allowTags:=addToList(sondertag)
Beziehungsweise für alle Texteingabefelder, die nicht den RTE benutzen:
- lib.parseFunc.allowTags:=addToList(sondertag)
In der Regel wird man aber den eigenen Tag nicht im Frontend ausgeben wollen, sondern man möchte ihn auf eine bestimmte – individuelle – Art parsen. Das kann mit Hilfe eines eigenen PHP-Skripts erfolgen oder über eine TypoScript-Konfiguration.
Für ein eigenes PHP-Skript kann man eine eine Extension anlegen und das hier ins Setup des TypoScript-Templates schreiben:
- # eigenes PHP-Script:
- lib.parseFunc.tags.sondertag= <plugin.tx_eigenExtension_pi1
Man kann aber auch im Kickstarter eine Extension anlegen, die sich im das Parsen eines einzigen Tags kümmert. In der Auswahl der Frontendplugins gibt es am Ende der Liste die Option, einen Custom Tag zu verarbeiten. In diesem Fall muss nichts mehr ins Setup geschrieben werden, da die Einbindung das localconf der neuen Extension übernimmt.
Oder man geht komplett über TypoScript, zum Beispiel so:
- # über TS
- lib.parseFunc_RTE.tags.myTag=TEXT
- lib.parseFunc_RTE.tags.myTag {
- # mit current=1 enthält man den aktuellen Inhalt des Tags
- current=1
- # eigenes wrap, z. B. für Boxen
- wrap(
- <divclass="box">
- <divclass="top"></div>
- <divclass="center">|</div>
- <divclass="bottom"></div>
- </div>
- )
- # Leerzeilen vor und nach dem Inhalt des Tags entfernen
- stripNL=1
- }
Einfügen über User-Elemente
Eigene HTML-Tags zu erlauben ist natürlich nur der erste Schritt – wir müssen es den Redakteuren noch ermöglichen, diese auch einzugeben. Normalerweise werden diese Tags nämlich bei der Eingabe bereits in Entities umgewandelt. Man könnte natürlich auf die HTML-Eingabe umschalten oder den RTE vorübergehen deaktivieren, aber das ist eigentlich nicht zumutbar.
Wir können es aber über eine eigene Bibliothek mit User-Elementen ermöglichen.
Zuerst muss das »user«-Werkzeug erlaubt werden. Dazu muss es entweder unter »showButtons« hinzugefügt oder bei »hideButtons« ausgelassen werden. Je nachdem, wie man prinzipiell den RTE konfiguriert hat. Ich gehe über hideButtons und lösche dort »user« aus der Liste:
- RTE.default{
- hideButtons(
- lefttoright,righttoleft,formattext,bidioverride,big,
- citation,definition,insertedtext,italic,keyboard,
- monospaced,sample,small,span,strikethrough,
- variable,bold,underline,fontstyle,fontsize,
- blockquote,insertparagraphbefore,insertparagraphafter,inserthorizontalrule,
- spellcheck,emoticon,inserttag,copy,cut,paste,
- justifyfull,textcolor,bgcolor,
- )
- }
Danach sollte im RTE ein Werkzeug auftauchen mit dem Tooltipp »Insert custom element«. Bei Klick öffnet sich ein Dialog, mit dem die neuen Elemente eingefügt werden können. Damit die Elemente zur Vefügung stehen, müssen diese noch konfiguriert werden:
- RTE.default{
- userElements {
- 10=Eigene Sondertags
- 10 {
- 1=Sondertag
- 1.description=Der ausgewählte Text wird umschlossen von<sondertag></sondertag>
- 1.mode=wrap
- 1.content= <sondertag>|</sondertag>
- }
- }
- }
Dabei bildet »10« eine Kategorie mit der Bezeichnung »Eigene Sondertags« und »1» ist das erste Element. Die folgenden Elemente dieser Kategorie beginnen mit »2«, »3« und so weiter. Wichtig ist die Angabe des Modus – damit wird erreicht, dass der markierte Text vom Content umgeben wird.
Mit dieser Technik können nicht nur Tags ermöglicht werden, sondern es können Bilder oder Textbausteine zur Verfügung gestellt werden oder auch weiterführende Formatierungen mit <div>-Containern. Es können sogarPHP-Skript darüber aufgerufen werden, die markierte Inhalte vor der Übergabe verarbeiten.
Fehler / Probleme
Bei uns tauchte gelegentlich das Problem auf, dass bei <div>-Containern, die auf diese Art in den RTE eingefügt wurden, bei der Ausgabe ins Frontend der äusserste Container in einen p-Tag umgewandelt wurde. Da in einen p-Tag kein <div> geschachtelt werden darf, hat das unangenehme Konsequenzen – unter Umständen auf das Rendering der gesamten Seite. Dieser Fehler ist ein Feature und kann abgeschaltet werden durch diesen Eintrag ins TypoScript Setup:
- ### das hier verursacht den Fehler:
- lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.remapTag.DIV=P
- ### so abschalten:
- lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.remapTag.DIV>
Dieser Eintrag soll eigentlich dafür sorgen, dass versehentlich eingefügte <div>-Tags durch Absätze ersetzt werden. Bei einigermaßen guter Konfiguration des RTE ist dieses Feature aber überflüssig und kann abgeschaltet werden.
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. Interessant sind hier vor allem die Abschnitte »userCategory« und »userElements«
- Tags Der Abschnitt über eigene Tags in TSref.
Cache löschen für Redakteure
Es gibt mehrere Möglichkeiten, den Cache von Typo3 durch Redakteure manuell oder automatisch löschen zu lassen. Damit ein Benutzer oder eine Benutzergruppe den Seitencache oder gar den kompletten Frontend-Cache löschen darf, müssen ins User TSConfig die folgenden Zeilen geschrieben werden:
- # Eintrag im User TSConfig
- options.clearCache.pages = 1
- options.clearCache.all = 1
Damit kann der Redakteur den Seitencache sowohl im Seiten- wie auch im Listenmodul löschen. Den Frontend-Cache kann er nur über das Pulldownmenü im Seitenmenü löschen.
Als Alternative kann man über einen Eintrag in das Page TSConfig erreichen, dass entweder der gesamte Cache oder der von bestimmten Seiten automatisch gelöscht wird, sobald die Seite, auf der sich der Eintrag befindet, geändert wird.
- # Eintrag im Page TSConfig:
- TCEMAIN.clearCacheCmd=all
Wenn dieser Eintrag in das Page TSConfig des News-Archivs eingefügt wird, wird der gesamte Frontend-Cache automatisch gelöscht, wenn eine neue News erstellt wird.
Das führt unter Umständen zu Problemen mit der Performance. Wenn sich die News nicht auf allen Seiten befinden, ist es u. U. besser auf folgende Möglichkeiten auszuweichen:
- # Eintrag im Page TSConfig:
- # Cache nur bei bestimmten Seiten löschen
- TCEMAIN.clearCacheCmd = 1,2,45,46
- # Cache löschen von allen Unterseiten und Geschwisterseiten der Seite,
- # in der Eintrag steht
- TCEMAIN.clearCache_pageSiblingChildren = 1
- # nur die Caches der Geschwisterseiten löschen
- TCEMAIN.clearCache_pageSiblingChildren = 0
- # den Cache der Überseite der übergeordneten Seite löschen
- TCEMAIN.clearCache_pageGrandParent = 1
- # damit kann das automatische Löschen verhindert werden:
- TCEMAIN.clearCache_disable = 1
Weiterführende Links
Übersetzungen [Translate to xx];
trans2rm
trans2rm ist eine Extension, um den Eintrag »[Translate to xx]« beim Anlegen einer neuen Sprachversion zu unterdrücken. Sie muss nur installiert werden.
Um zu verhindern, dass in leere Titel-Felder (Copy) eingefügt wird, muss ausserdem im Page TSconfig dieser Eintrag hinein:
- TCEMAIN.default.disablePrependAtCopy=1</span>
Weiterführende Links