Man kann nicht überholen,

wenn man in andere Fußstapfen tritt!

Input && Text Checkbox && Select Group Miscellaneous File && Images

Erste Schritte

In diesem Tutorial werden wir ein einfaches Inhaltselement mit einem Titel und einer Beschreibung erstellen.

Übersicht

Zunächst müssen Sie sich im TYPO3-Backend mit Administratorrechten anmelden. Diese sind erforderlich, um DCEs zu erstellen oder zu bearbeiten. Inhaltselemente, die mit DCE erstellt wurden, können auch mit normalen Redakteursrechten verwendet werden.

Sie finden DCE unter „Admin Tools“ im Hauptmenü. Es zeigt Ihnen eine Liste aller bereits in der Datenbank vorhandenen DCEs an:

 

Erstellen Sie Ihr erstes DCE

Klicken Sie auf die Schaltfläche „Neues DCE erstellen“ und geben Sie den Titel Ihres neuen dynamischen Inhaltselements ein. Zum Beispiel: „erster Text“.

Außerdem setzen wir den Bezeichner auf „erster Text“. Dieser wird später mit dem Präfix „dce_“ versehen und als CType des neuen Inhaltselements verwendet.

Erstellen Sie nun ein neues Feld, behalten Sie den Standardtyp „Element“ bei und geben Sie „Titel“ als Feldtitel ein. Setzen Sie die Variable auf „title“.

 

Achtung

Variablennamen für DCE-Felder müssen in Kleinbuchstaben geschrieben werden! Sonderzeichen sind hier nicht erlaubt, ebenso wenig Zahlen am Variablenanfang!

 

Als Konfiguration wählen wir die Option „Einfaches Eingabefeld“ aus dem Dropdown oberhalb des Code-Editors. Es wird eine Beispielkonfiguration mit häufig verwendeten Einstellungen eingefügt. Sie sollten diese Ausgabe erhalten:

 

TYPE: input

Simple input field

Die Standardkonfiguration lautet:

  1. <config>
  2. <type>input</type>
  3. <size>30</size>
  4. <required>1</required>
  5. <eval>trim</eval>
  6. </config>

Damit ergibt sich ein einfaches Inputfeld, das im Backend ausgefüllt werden muss. Das"required" kann auch “0” sein, dann ist das Eingabefeld optional.

Wenn das "trim" durch ein "date" ersetzt wird, erhält man eine einfache Datumseingabe.

  1. <config>
  2.  <type>input</type>
  3.  <size>30</size>
  4.  <required>1</required>
  5.  <eval>date</eval>
  6. </config>

Typolink

Die Standardkonfiguration lautet:

  1. <config>
  2.    <type>input</type>
  3.    <renderType>inputLink</renderType>
  4.    <size>30</size>
  5.    <eval>trim</eval>
  6.    <softref>typolink,typolink_tag,images,url</softref>
  7.    <fieldControl>
  8.        <linkPopup>
  9.            <options>
  10.                <!--<blindLinkOptions>file,mail,page,spec,url</blindLinkOptions>-->
  11.                <!--<blindLinkFields>class,params,target,title</blindLinkFields>-->
  12.            </options>
  13.        </linkPopup>
  14.    </fieldControl>
  15. </config>

Damit wird ein Eingabefeld erzeugt, welches das Standard-Eingabefenster für Verlinkungen in Typo3 öffnet. Es werden die üblichen Eingabemöglichkeiten erzeugt.

Diese können jedoch beeinflusst werden, indem man zum Beispiel die Optionen "mail" oder "params" ausblendet.

  1. <options>
  2.    <blindLinkOptions>mail,url</blindLinkOptions>
  3.    <blindLinkFields>params</blindLinkFields>
  4. </options>

Die Option "Ordner" lässt sich auch aus dem Link Browser entfernen, indem man die <blindLinkOptions> um die Option "folder" erweitert.

Wenn unter <options> die Eigenschaft <allowedExtensions> ergänzt wird, kann definiert werden, welche Datei-Typen ausgewählt werden dürfen:

  1. <options>
  2.    <allowedExtensions>pdf</allowedExtensions>
  3. </options>

TYPE: text

RTE

Die Standardkonfiguration lautet:

  1. <config>
  2.  <type>text</type>
  3.  <rows>5</rows>
  4.  <cols>30</cols>
  5.  <required>1</required>
  6.  <eval>trim</eval>
  7.  <enableRichtext>1</enableRichtext>
  8.  <richtextConfiguration>default</richtextConfiguration>
  9.  <softref>typolink_tag,email[subst],url</softref>
  10. </config>

Mit dieser Konfiguration wird der CKEditor RTE aufgerufen, mit der im Typo3 festgelegten Standardkonfiguration.

Hier können im Feld <richtextConfiguration> auch "minimal" und "full" eingetragen werden, um jeweils den minimalen bzw. vollständigen CKEditor zu erhalten. Auch, wenn eine eigene Konfiguration des CKEditors angelegt wurde, wird die entsprechende Variable hier eingetragen.

Simple textarea

Die Standardkonfiguration lautet:

  1. <config>
  2.   <type>text</type>
  3.   <rows>5</rows>
  4.   <cols>30</cols>
  5.   <required>1</required>
  6.   <eval>trim</eval>
  7. </config>

Diese Konfiguration erzeugt eine einfache Textbox.

Fluid-Programmierung

Die Templates der DCEs werden mit Fluid-Programmierung festgelegt. Das bedeutet, sie alleine bestimmen, wie die Backend-Eingaben im Frontend ausgegeben werden.

Fluid ist eine "Template engine". Sie ist einfach zu verwenden und zu erweitern. Diese Art der Programmierung wird seit einiger Zeit in Typo3 selbst und auch in den neueren Extensionen verwendet. Daher kommt sie auch in der Extension DCE zum Einsatz.

Ein großer Vorteil von Fluid ist es, dass sich bequem Abfragen, Schleifen und Bedingungen mit HTML und CSS verbinden lassen. Das Template kann entweder als ausgelagerte Datei oder Inline definiert werden. 

Als ausgelagerte Datei lassen sich Templates schnell in verschiedenen Typo3 Systemen verwenden und einfacher in verschiedene Unter-Templates aufteilen. Das Template direkt “Inline” auf diesem Reiter zu definieren, ist jedoch sinnvoller, wenn ein einfaches Template verwendet wird, welches sich nicht in einem anderen DCE wiederholt.

Über Die Schaltfläche “Template-Inhalt” lassen sich Variablen und einige “ViewHelper” direkt auswählen. 

Nun bauen wir die Frontend-Darstellung auf, die wir für jedes Content-Element auf Basis dieses DCE wünschen. Als Template-Engine kommt Fluid zum Einsatz:

  1. <div class="dce">
     <h2>{field.title}</h2> 
     <a href="{field.typoLink}" > typolink</a>
     <div><f:format.html>{field.description}</f:format.html></div>
     <div>{field.textArea}</div>
      
    </div>

Wir verwenden Variablen, die auf die zuvor definierten Felder verweisen, zum Beispiel: {field.title}.

Wenn du HTML ausgeben möchtest, musst du den Format-HTML-View-Helper von Fluid verwenden. Du kannst ihn wie im obigen Beispiel oder inline verwenden: 
 

  1. {field.description -> f:format.html()}

Wenn wir das DCE speichern, die System-Caches leeren (!) und ein neues Inhaltselement auf Basis dieses DCE erstellen, sehen wir diese Ausgabe (sowohl im Backend als auch im Frontend):

Anrufen
Instagram