---
title: TYPO3 Custom Elemente – Kern erweitern mit eigenen Typen
url: "https://nitsantech.de/blog/typo3-custom-element"
description: "Vermeiden leistungshungrige Erweiterungen. Erstellen TYPO3 custom elemente mit Kernmethoden, TCA, TypoScript, fluid-templates & backend vorschau."
image: "https://nitsantech.de/fileadmin/_processed_/c/3/csm_Custom-TYPO3-Elements-Blog-Share_0abd6dadf7.jpg"
date: 2021-07-30
modified: 2025-11-07
lastUpdated: 2026-02-26
keywords:
- TYPO3 Custom Content
- Custom TYPO3 Content Element
- TYPO3 Core element
- creating TYPO3 Content element
categories:
- TYPO3 CMS
---
# TYPO3 Custom Elemente – Kern erweitern mit eigenen Typen
Wie man benutzerdefinierte Elemente in TYPO3 erstellt
=====================================================
30 Juli 2021
[](https://nitsantech.de/blog/autor/sven-thelemann)
[Sven Thelemann](https://nitsantech.de/blog/autor/sven-thelemann)
[ TYPO3 CMS ](https://nitsantech.de/categories/typo3-cms)
Wenn Sie TYPO3 verwenden und Ihr eigenes benutzerdefiniertes TYPO3-Element erstellen möchten, sind Sie hier genau richtig. Glücklicherweise ist es einfach, benutzerdefinierte Inhaltselemente in TYPO3 zu erstellen, wenn Sie einige einfache Schritte befolgen.
Table of content
**Benutzerdefinierte TYPO3 Elemente** sind die Grundvoraussetzung für die Entwicklung von [**TYPO3 Websites**](https://nitsantech.de/blog/typo3-website). Obwohl der TYPO3 Kern eine Reihe von eingebauten Elementen bietet. Aber für die Entwicklung eigener TYPO3 Websites ist eine spezielle Art von angepassten TYPO3 Elementen erforderlich. Als [**TYPO3 Entwickler**](https://nitsantech.de/typo3-freelancer), der mit [**TYPO3 Agentur**](https://nitsantech.de/typo3-agentur) arbeitet, sollten Sie die Best Practices kennen.
In diesem Blog-Beitrag zeigen wir Ihnen, wie Sie benutzerdefinierte TYPO3 Elemente in der von Ihnen gewünschten Form erstellen können.
Wenn Sie sich fragen, warum wir keine Erweiterung installieren, anstatt ein eigenes TYPO3-Element zu erstellen, dann deshalb, weil die Seitengeschwindigkeit wichtig ist. Jede Erweiterung, die wir installieren, kommt mit zusätzlichen CSS und JS Dateien. Diese können die Leistung von TYPO3 beeinträchtigen. Außerdem wollen wir das Design unserer Komponenten genau kontrollieren.
### TYPO3 Custom Element
TYPO3 ermöglicht es Entwicklern auch, eigene TYPO3 Inhaltselemente zu erstellen.
Die Widgets/Elemente, die vom Benutzer auf benutzerdefinierte Weise erstellt werden, werden TYPO3 Custom Elements genannt.
### TYPO3 Core Element
TYPO3 Core-Elemente enthalten standardmäßig verfügbare Code-Teile, die Sie Ihrer Website hinzufügen können.
Betrachten Sie sie als Module, die Sie verwenden können, um verschiedene Elemente durch eine einfache Auswahl- und Bearbeitungsoption hinzuzufügen.
Ein Inhaltstyp für das Seitenmodul von TYPO3 zeichnet sich durch verschiedene Einstellungen aus. Wir führen Sie durch die einzelnen Schritte, die erforderlich sind, um ein Inhaltselement mit dem gewünschten Design und der gewünschten Benutzerfreundlichkeit zu erstellen, um den Inhaltsredakteuren zu helfen. Wir fügen Code und Einstellungen im [**TYPO3 Backend**](https://nitsantech.de/blog/typo3-backend) wie folgt hinzu:
- **Datenbank feld:** Datenbanktabelle ein Feld für "tt\_content" hinzu.
- **Backend TCA:**
- Hinzufügen der Konfiguration für das zusätzliche Backend-Formularfeld für die Tabelle "tt\_content" im TCA (Table Configuration Array).
- Fügen Sie den Inhaltstyp zur Liste der verfügbaren Inhaltstypen hinzu.
- Hinzufügen der Konfigurationsoptionen für verfügbare Felder für Redakteure im Backend.
- **Assistent für neue Inhaltselemente:** Fügen Sie den Inhaltstyp dem Assistenten hinzu.
- **Backend-Inhaltselement-Vorschau im Seitenmodul:** Fügen Sie eine Redakteursvorschau im TYPO3 Backend-Seitenmodul hinzu, um den Inhalt für die Redakteure anzuzeigen.
- **Erstellen Sie einen DataProcessor:** Verarbeiten Sie Inhalte mit einem DataProcessor, um die Syntaxhervorhebung highlight.php auf die Ausgabe anzuwenden.
- **TypoScript-Konfiguration:** Jeder Inhaltselementtyp benötigt eine TypoScript-Konfiguration, um zu definieren, was im Frontend angezeigt werden soll.
- **Flüssige Vorlage:** Wir fügen eine Fluid-Vorlage hinzu, um unseren Inhaltselementtyp im Frontend darzustellen.
Schauen wir uns nun die einzelnen Schritte im Detail an.
Wie Erstellt man ein Benutzerdefiniertes TYPO3 Inhaltselement?
--------------------------------------------------------------
Zunächst müssen wir den Schlüssel des neuen Inhaltselementtyps definieren.
Als nächstes muss der Schlüssel zum Auswahlfeld CType hinzugefügt werden. Dadurch wird er in der Dropdown-Liste Typ im Backend verfügbar.
Der folgende Aufruf muss in die Datei Configuration/TCA/Overrides/tt\_content.php eingefügt werden.
### Registerkarte Registrierung der TYPO3 "Benutzerdefinierte Elemente"
// typo3conf/ext/myextension/ext\_localconf.php
$iconRegistry = \\TYPO3\\CMS\\Core\\Utility\\GeneralUtility::makeInstance(\\TYPO3\\CMS\\Core\\Imaging\\IconRegistry::class);
// use same identifier as used in TSconfig for icon
$iconRegistry->registerIcon(
// use same identifier as used in TSconfig for icon
'my-icon-identifier',
\\TYPO3\\CMS\\Core\\Imaging\\IconProvider\\FontawesomeIconProvider::class,
// font-awesome identifier ('external-link-square')
\['name' => 'external-link-square'\]
);
// typo3conf/myextension/Configuration/TCA/Overrides/tt\_content.php
\\TYPO3\\CMS\\Core\\Utility\\ExtensionManagementUtility::addTcaSelectItem(
'tt\_content',
'CType',
\[
'LLL:EXT:myextension/Resources/Private/Language/Tca.xlf:myextension\_newcontentelement',
'myextension\_newcontentelement',
'my-icon-identifier',
\],
'header',
'after'
);
### Ein Datenbankfeld hinzufügen
Wenn ein benutzerdefiniertes Inhaltselement die Datenbank ändern muss, muss eine Datei ext\_tables.sql zur Erweiterung hinzugefügt werden. Die Syntax ist SQL, und auch wenn wir ein Feld zu einer bestehenden Tabelle hinzufügen, verwenden wir die Syntax CREATE TABLE.
Wenn wir z. B. Optionen anzeigen möchten, die Werte aus einem Dropdown-Menü übernehmen, können die Redakteure ganz einfach einen Eingabewert für die Formel angeben. Für unseren benutzerdefinierten Inhaltstyp fügen wir ein Feld user\_value in die Tabelle tt\_content ein.
Und so sieht unsere Datei ext\_tables.sql aus:
CREATE TABLE tt\_content (
code\_language text DEFAULT '' NOT NULL
);
### Hinzufügen der Konfiguration zum TCA
TCA ist die Konfigurationsschicht über der Datenbank, mit der TYPO3 arbeitet. Die TCA enthält Konfigurationsoptionen für Datenbankfelder und teilt dem System mit, wie ein bestimmtes Feld und sein Wert oder seine Wertoptionen für Backend-Benutzer in verschiedenen Formularen angezeigt werden sollen.
Zur Veranschaulichung werden wir drei Dinge zur TCA für die Tabelle "tt\_content" hinzufügen. Die gesamte Konfiguration ist in der Datei Configuration/TCA/Overrides/tt\_content.php enthalten:
##### **Hinzufügen der Konfiguration für das erstellte Feld code\_language**
Fügen Sie ein neues Feld als Select-Element hinzu. Die Werte, die ein Backend-Benutzer auswählen kann, werden von einem separaten DataProvider generiert (siehe Ordner Classes/DataProvider), der die ExtensionManagementUtility von TYPO3 Core nutzt, um die neue Feldkonfiguration zur TCA für tt\_content hinzuzufügen:
// Add dropdown for code language to TCA.
$additionalColumns = \[
'code\_language' => \[
'label' => 'LLL:EXT:codeblock/Resources/Private/Language/locallang\_db.xlf:tt\_content.code\_language',
'config' => \[
'type' => 'select',
'default' => '',
'itemsProcFunc' => 'NITSAN\\\\Codeblock\\\\DataProvider\\\\CodeLanguages->getAll',
'renderType' => 'selectSingle',
\],
\],
\];
\\TYPO3\\CMS\\Core\\Utility\\ExtensionManagementUtility::addTCAcolumns('tt\_content', $additionalColumns);
\\TYPO3\\CMS\\Core\\Utility\\ExtensionManagementUtility::addToAllTCAtypes(
'tt\_content',
'code\_language',
'codeblock',
'before:bodytext'
);
##### **Hinzufügen von Content-Type zur Liste der verfügbaren Inhaltstypen**
Wir haben die ExtensionManagementUtilty API verwendet, um die TCA-Konfiguration für das Feld "CType '' zu ändern und unseren neuen Inhaltstyp zur Liste hinzuzufügen.
\\TYPO3\\CMS\\Core\\Utility\\ExtensionManagementUtility::addTcaSelectItem(
'tt\_content',
'CType',
\['LLL:EXT:codeblock/Resources/Private/Language/locallang\_db.xlf:tt\_content.CType', 'codeblock', 'content-codeblock'\],
'html',
'after'
);
### Hinzufügen Eintrags im Assistenten für neue Inhaltselemente
Um dem "New Content Element Wizard" auswählbare TYPO3-Inhaltselemente hinzuzufügen, müssen Sie ein paar Zeilen PageTS verwenden.
**Konfiguration/SeiteTs/SeiteTs.tsconfig:**
mod.wizards.newContentElement {
wizardItems {
common.elements.codeblock {
title = LLL:EXT:codeblock/Resources/Private/Language/locallang\_db.xlf:tt\_content.CType
description = LLL:EXT:codeblock/Resources/Private/Language/locallang\_db.xlf:tt\_content.wizard.description
tt\_content\_defValues.CType = codeblock
iconIdentifier = content-codeblock
}
common.show := addToList(codeblock)
}
}
**PageTs.tsconfig**
Um einen iconIdentifier zu verwenden, müssen Sie das Symbol zunächst registrieren,
// typo3conf/myextension/ext\_localconf.php
// Register for hook to show preview of tt\_content element of CType="myextension\_newcontentelement" in page module
$GLOBALS\['TYPO3\_CONF\_VARS'\]\['SC\_OPTIONS'\]\['cms/layout/class.tx\_cms\_layout.php'\]\['tt\_content\_drawItem'\]\['myextension\_newcontentelement'\] =
\\Vendor\\myextension\\Hooks\\PageLayoutView\\NewContentElementPreviewRenderer::class;
// typo3conf/myextenison/Classes/Hooks/PageLayoutView/NewContentElementPreviewRenderer.php
namespace Vendor\\MyExtension\\Hooks\\PageLayoutView;
use TYPO3\\CMS\\Backend\\View\\PageLayoutView;
use TYPO3\\CMS\\Backend\\View\\PageLayoutViewDrawItemHookInterface;
class NewContentElementPreviewRenderer implements PageLayoutViewDrawItemHookInterface
{
/\*\*
\* Preprocesses the preview rendering of a content element of type "My new content element"
\*
\* @param \\TYPO3\\CMS\\Backend\\View\\PageLayoutView $parentObject Calling parent object
\* @param bool $drawItem Whether to draw the item using the default functionality
\* @param string $headerContent Header content
\* @param string $itemContent Item content
\* @param array $row Record row of tt\_content
\*
\* @return void
\*/
public function preProcess(
PageLayoutView &$parentObject,
&$drawItem,
&$headerContent,
&$itemContent,
array &$row
) {
if ($row\['CType'\] === 'myextension\_newcontentelement') {
$itemContent .= 'We can change our preview here!
';
$drawItem = false;
}
}
}
### Erstellen eines DataProcessors
Datenprozessoren können für einige Datenmanipulationen oder andere Aktionen verwendet werden, die Sie durchführen möchten, bevor Sie alles an die Ansicht übergeben.
Sie finden die vollständige Datei unter Classes/DataProcessing/HighlightProcessor.php.
Wir verwenden den Wert eines bestimmten Feldes ($processorConfiguration\['field'\]), verarbeiten ihn mit highlight.php und geben eine formatierte Version des Wertes zurück, die in der Frontend-Ausgabe verwendet werden kann.
public function process(ContentObjectRenderer $cObj, array $contentObjectConfiguration, array $processorConfiguration, array $processedData)
{
$fieldName = $processorConfiguration\['field'\];
$targetVariableName = $cObj->stdWrapValue('as', $processorConfiguration, 'bodytext\_formatted');
$highlight = GeneralUtility::makeInstance(Highlighter::class);
// Let highlight.php decide which code language to use from all registered if "detect automatically" is selected.
if (!$processedData\['data'\]\['code\_language'\]) {
$languages = $highlight->listLanguages();
$highlight->setAutodetectLanguages($languages);
$highlighted = $highlight->highlightAuto($processedData\['data'\]\[$fieldName\]);
} else {
$highlighted = $highlight->highlight($processedData\['data'\]\['code\_language'\], $processedData\['data'\]\[$fieldName\]);
}
$processedData\[$targetVariableName\]\['code'\] = $highlighted->value;
$processedData\[$targetVariableName\]\['language'\] = $highlighted->language;
$processedData\[$targetVariableName\]\['lines'\] = preg\_split('/\\r\\n|\\r|\\n/', $highlighted->value);
return $processedData;
}
### Integration der TypoScript-Konfiguration für die Frontend-Ausgabe
Damit TYPO3 im Frontend etwas ausgeben kann, müssen wir ihm sagen, was es tun soll, wenn es versucht, ein Inhaltselement vom Typ "Codeblock" zu rendern. Wir erweitern die [**TypoScript**](https://nitsantech.de/typoscript-conditions-with-symfony-expression-language) Konfiguration für tt\_content mit unserer benutzerdefinierten Content-Type-Konfiguration in Configuration/TypoScript/setup. typoscript und fügen die Konfiguration für dataProcessing zu unserer Elementkonfiguration hinzu, um den Wert des Feldes "bodytext" zu verarbeiten:
tt\_content.codeblock =< lib.contentElement
tt\_content.codeblock {
templateName = Codeblock
templateRootPaths.0 = EXT:codeblock/Resources/Private/Templates
dataProcessing.1567071612 = NITSAN\\Codeblock\\DataProcessing\\HighlightProcessor
dataProcessing.1567071612 {
field = bodytext
as = bodytext\_formatted
}
}
### Einbetten einer Fluid-Vorlage für entwickelte Content-Typen
Als letzten Schritt müssen wir die Fluid-Vorlage erstellen, um den Inhalt in unserem Frontend darzustellen. Der Name und der Ordner der Fluid-Vorlage sind in der TypoScript-Einrichtung oben definiert und können unter Resources/Private/Templates/Codeblock.html gefunden werden.
{bodytext\_formatted.code -> f:format.raw()}
### Möchten Sie eine coole Backend-Vorschau Haben?
Sie können auf zwei Arten eine Backend-Vorschau Ihres erstellten benutzerdefinierten [TYPO3](https://nitsantech.de/blog/typo3)-Elements erhalten,
1. Verwendung Fluid-Vorlage über PageTSconfig
2. Benutzerdefinierte Backend-Vorschau mit "klassischem" Seitenmodul
Hier erfahren Sie, wie Sie eine standardmäßige und benutzerdefinierte Backend-Vorschau erhalten.
**Verwendung der Fluid-Vorlage über PageTSconfig**
Wir können einfach eine flüssige Vorlage angeben, die als Vorschau in PageTSconfig gerendert wird:
mod.web\_layout.tt\_content.preview.fs\_slider = EXT:fluid\_styled\_slider/Resources/Private/Templates/Preview/content-codeblock.html
Diese Vorlage erhält alle Felder der tt\_content-Zeile direkt. So enthält {header} den Header, {bodytext} den Bodytext und so weiter.
**Benutzerdefinierte Backend-Vorschau mit "klassischem" Seitenmodul**
Wenn Sie eine spezielle Vorschau im "klassischen" Backend-Modul Web > Seite erzeugen wollen, können Sie dafür einen Hook verwenden:
// Register for hook to show preview of tt\_content element of CType="yourextensionkey\_newcontentelement" in page module
$GLOBALS\['TYPO3\_CONF\_VARS'\]\['SC\_OPTIONS'\]\['cms/layout/class.tx\_cms\_layout.php'\]\['tt\_content\_drawItem'\]\['content-codeblock'\] = \\Vendor\\YourExtensionKey\\Hooks\\PageLayoutView\\NewContentElementPreviewRenderer::class;
Entsprechend dem verwendeten Namespace muss eine neue Datei Classes/Hooks/PageLayoutView/NewContentElementPreviewRenderer.php mit folgendem Inhalt erstellt werden:
We can change our preview here!';
$drawItem = false;
}
}
}
Sie können eine beliebige Methode verwenden, um eine Backend-Vorschau entsprechend Ihren Anforderungen zu erstellen. Auch die Erstellung einer Backend-Vorschau ist optional, aber aus Sicht des Redakteurs ist es gut, eine benutzerdefinierte und klare Backend-Vorschau zu haben.
Danke, dass Sie meinen Artikel gelesen haben!
Ich hoffe, Sie lernen und erkunden, wie Sie mit TYPO3-core benutzerdefinierte Elemente erstellen können. Lassen Sie uns kurz rekapitulieren.
- Bei der Entwicklung einer TYPO3-Website ist es sehr wichtig zu definieren, was mit den bestehenden TYPO3-Kernelementen gemacht werden soll und wo Sie flexible TYPO3-Elemente erstellen möchten.
- Entdecken Sie alle verfügbaren TYPO3-Erweiterungen, die eine einfache Entwicklung und Pflege Ihrer TYPO3-Website ermöglichen.
- Üben Sie weiterhin die TYPO3-Kernfunktionen, um zukunftssichere benutzerdefinierte TYPO3-Elemente zu erstellen.
Wie erstellen Sie am liebsten benutzerdefinierte TYPO3-Elemente? Oder haben Sie Fragen oder Probleme bei der Erstellung eines benutzerdefinierten Elements für TYPO3? Ich freue mich auf Ihren Kommentar unten in der Kommentarbox.
Ein strukturierter Start für TYPO3-Projekte
-------------------------------------------
Nutzen Sie diesen Leitfaden, um typische Fehler zu vermeiden und Ihr TYPO3-Projekt von Anfang an auf ein solides Fundament zu stellen.
[ Leitfaden herunterladen ](https://nitsantech.de/javascript:;)
#### Ansprechpartner für Internetagentur und TYPO3 Projekte
#### Sven Thelemann
Servicepartner - Deutschland
[ st@nitsantech.de ](mailto:st@nitsantech.de) [ +49 351 48196661 ](tel:4935148196661)
### Sven Thelemann
Client Service Lead
- [](https://www.linkedin.com/in/sven-thelemann-0a30867b/ "linkedin")
Sven Thelemann ist Client Service Lead bei NITSAN und konzentriert sich auf die Bereitstellung von TYPO3 Lösungen, die den Kundenzielen entsprechen. Mit seinem ausgeprägten Verständnis für Technologie und Kundenerwartungen sorgt er für eine reibungslose Kommunikation und Projektabwicklung. Außerhalb der Arbeit fährt Sven Thelemann gerne Fahrrad und experimentiert mit selbstgemachten Rezepten.
Kommentare und Antworten
------------------------
Danke für deinen Kommentar. Ihr Kommentar wurde erfolgreich hinzugefügt.
Danke für deinen Kommentar. Dein Kommentar wird nach der Überprüfung sichtbar.
Oops! Something went wrong, please try again later.
##### **Sei der erste der kommentiert**
### Verwandte Blogs
[ 
#### TYPO3 CMS für Öffentlichen Sektor Websites: Bewährte Verfahren
](https://nitsantech.de/blog/typo3-oeffentlicher-sektor-deutschland-2026)
[ 
#### TYPO3 SEO: Verbessern Sie das Ranking Ihrer TYPO3-Website
](https://nitsantech.de/blog/typo3-seo)