HTML in Überschriften zulassen

Zuletzt aktualisiert:

  • 3.5
  • 4.4
  • 4.9
  • 4.13
  • 5.3
  • 5.7

In der Standardkonfiguration kannst du bei Contao-Inhaltselementen keine HTML-Tags in den Überschriften verwenden. Wenn du HTML-Tags zulassen möchtest, kannst du dies entsprechend konfigurieren.

Wenn du beispielsweise einen <span>-Tag in Überschriften verwenden möchtest, funktioniert das in der Standardkonfiguration nicht. Contao entfernt die Tags beim Speichern automatisch aus Sicherheitsgründen. Dieser Vorgang wird als Input-Encoding bezeichnet.

Um dieses Verhalten zu ändern, musst du je nach Contao-Version die entsprechende Konfiguration anpassen.

Anpassungen ab Contao 5 (Twig)

Lege die entsprechenden Konfigurationsdateien an:

Datei: /contao/dca/tl_content.php

<?php

/* HTML in Überschriften */
$GLOBALS['TL_DCA']['tl_content']['fields']['headline']['eval']['allowHtml'] = true;

Datei: /contao/dca/tl_news.php

<?php

/* HTML in News Überschriften bzw. Titel erlauben */
$GLOBALS['TL_DCA']['tl_news']['fields']['headline']['eval']['preserveTags'] = true;

Sollten die entsprechenden Dateien und Unterverzeichnisse nicht vorhanden sein, musst du diese ebenfalls anlegen.

Wichtig: Nach dem Anlegen der Dateien musst du den Anwendungs-Cache leeren.

Anpassung Twig-Template

Seit Contao 5 werden in Contao-Core Twig-Templates verwendet, bei denen aus Sicherheitsgründen HTML-Tags bei der Ausgabe entfernt werden. Wenn du die HTML-Tags ungefiltert anzeigen möchtest, musst du das entsprechende Template anpassen und den Filter raw hinzufügen. Weitere Informationen zu Twig-Templates findest du im Contao Handbuch.

Um sicherzustellen, dass diese Änderungen für alle Überschriften, einschließlich Text- und Bildelemente funktionieren, passen wir das Komponenten-Template templates/component/_headline.html.twig an und fügen den Filter raw hinzu.

Template: /templates/component/_headline.html.twig

{% use "@Contao/component/_headline.html.twig" %}

{# Der Block headline_inner wird um die nötigen Filter ergänzt. #}
{% block headline_inner %}     
    {{ headline.text|insert_tag_raw|raw }}
{% endblock %}

Sicherheitsrisiko beachten

Die Verwendung des Filters raw kann ein Sicherheitsrisiko darstellen. Daher solltest du sorgfältig abwägen, ob es tatsächlich erforderlich ist, ihn zu verwenden, oder ob es nicht vielleicht eine bessere Lösung gibt.

Anpassungen Contao 4.9 bis 4.13

Unter Contao 4 könntest du zwar immer noch die dcaconfig.php wie unter Contao 3 anpassen, diese wird allerdings spätestens mit Contao 5 nicht mehr unterstützt. Ich empfehle deswegen, folgende Konfigurationsdateien zu verwenden:

Datei: /contao/dca/tl_content.php

<?php

/* HTML in Überschriften zulassen */
$GLOBALS['TL_DCA']['tl_content']['fields']['headline']['eval']['allowHtml'] = true;

Datei: /contao/dca/tl_news.php

<?php

/* HTML in News Überschriften bzw. Titel erlauben */
$GLOBALS['TL_DCA']['tl_news']['fields']['headline']['eval']['preserveTags'] = true;

Sollten die entsprechenden Dateien und Unterverzeichnisse nicht vorhanden sein, musst du diese ebenfalls anlegen.

Wichtig: Nach dem Anlegen der Dateien musst du den Anwendungs-Cache leeren.

Anpassungen für Contao 4.4

Beachte hier die geänderten Pfade zwischen Contao 4.4 und Contao 4.9+.

Datei: /app/Resources/contao/dca/tl_content.php

<?php

/* HTML in Überschriften */
$GLOBALS['TL_DCA']['tl_content']['fields']['headline']['eval']['allowHtml'] = true;

Datei: /app/Resources/contao/dca/tl_news.php

<?php

/* HTML in News Überschriften bzw. Titel erlauben */
$GLOBALS['TL_DCA']['tl_news']['fields']['headline']['eval']['preserveTags'] = true;

Sollten die entsprechenden Dateien und Unterverzeichnisse nicht vorhanden sein, musst du diese ebenfalls anlegen.

Wichtig: Nach dem Anlegen der Dateien musst du den Anwendungs-Cache leeren.

Anpassungen für Contao 3

Einwilligung für das Abspielen von eingebetteten „YouTube"-Videos

Zur Wiedergabe dieses Videos nutzen wir „YouTube". Bei der Wiedergabe werden personenbezogene Daten und Informationen aus Ihrem Endgerät zum Zwecke der Einbindung externer Streaming-Inhalte verarbeitet. Dabei werden auch Daten an Google in den USA weitergegeben und dort verarbeitet. Weitere Informationen finden Sie in unserer Datenschutzerklärung.

Dazu bearbeitest du die Datei system/config/dcaconfig.php und fügst die folgenden Zeilen ein:

/* HTML in Überschriften */
$GLOBALS['TL_DCA']['tl_content']['fields']['headline']['eval']['allowHtml'] = true;

/* HTML in News Überschriften */
$GLOBALS['TL_DCA']['tl_news']['fields']['headline']['eval']['preserveTags'] = true;

Ab sofort kannst du in den Überschriften auch HTML-Tags verwenden. Solltest du bereits vor den Anpassungen HTML-Tags in Überschriften ergänzt haben, musst du diese Elemente erneut öffnen und frisch abspeichern.

Weitere Informationen findest du auch unter: DCA-Konfiguration und Sprachdateien in Contao anpassen

Möchtest du über neue Artikel informiert werden?

Dann trage hier deine E-Mailadresse ein und klicke auf „Abonnieren". Du erhältst regelmäßig aktuelle Infos über Contao und die Contao-Academy.

Du kannst deine E-Mail-Adresse jederzeit mit nur einem Mausklick aus unserem System löschen. Der Newsletter Versand sowie die individuelle Messung, Speicherung und Auswertung von Öffnungsraten und der Klickraten in Empfängerprofilen erfolgen durch KlickTipp. Ausführliche Hinweise erhältst du in unserer Datenschutzerklärung.

Über den Autor

Christian Feneberg ist der Initiator und Dozent der Contao Academy. Er bringt über 15 Jahre Praxiswissen in der professionellen Umsetzung von Contao-Websites mit. Zudem ist er Teil des Teams von trakked.io. Er liebt es, sich neues Wissen anzueignen und es weiterzugeben. Abseits des Bildschirms verbringt er am liebsten Zeit mit seiner Familie und in der Natur.

Folge Christian jetzt bei LinkedIn.

Christian Feneberg

7 Kommentare

Tom

Danke, das hat sehr geholfen.
ein Verbesserungsvorschlag für den Artikel Bereich contao5:
das twig-template existiert ja bereits und ist u.a. mit Beispieldaten versehen, die ausgeklammert sind.

ich habe ne weile gebraucht zu erkennen wie in twig ausgeklammert wird und hatte den (jetzt gut funktionierenden code) in die Ausklammerung gesetzt. Ein Hinweis an dieser Stelle das der Code am Ende der Datei gut aufgehoben ist hätte sicher nicht nur mir ne Stunde sucherei gespart ;)

macht weiter so!

Christian Feneberg Antwort von Christian Feneberg

Vielen Dank für deinen Hinweis. Ich habe jetzt im Snippet extra einen Kommentar ergänzt, hoffe, das hilft anderen schon mal weiter.

Thomas Schneider

Hi,

HTML in Überschriften für Contao 5

Wo muß diese Datei "/contao/dca/tl_content.php" liegen, im Ordner public?

Denn in der Contao-Installation gibt es im ROOT den Ordner "contao" nicht bei mir.

Antwort von Maren Lange

Wenn der Ordner und die Datei nicht vorhanden sind, legst Du diese selbst an.

Dinko

Hi, wie erreiche ich das bei "Events"? Einfach tl_events einzusetzen hat nichts gebracht.
C 4.9.1, Cache gelöscht mit ./vendor/bin/contao-console cache:clear
dcaconfig.php:

/* HTML in Überschriften */
$GLOBALS['TL_DCA']['tl_content']['fields']['headline']['eval']['allowHtml'] = true;
$GLOBALS['TL_DCA']['tl_events']['fields']['headline']['eval']['allowHtml'] = true;

/* HTML in News Überschriften */
$GLOBALS['TL_DCA']['tl_news']['fields']['headline']['eval']['preserveTags'] = true;
$GLOBALS['TL_DCA']['tl_events']['fields']['headline']['eval']['preserveTags'] = true;

Christian Feneberg Antwort von Christian Feneberg

Hallo Dinko,

probiere es mal mit tl_calendar_events

Viele Grüße
Christian

Marcus

In Contao 4 ist es wohl zukunftssicherer/ Best Practice eine Datei pro tl-Bereich in app/Resources/contao/dca zu erstellen und dort den Code reinzuschreiben.

Also z.B. für alles, was mit $GLOBALS['TL_DCA']['tl_page'] beginnt, dort eine Datei tl_pape.php anzulegen und dort dann z.B.

$GLOBALS['TL_DCA']['tl_page']['fields']['title']['eval']['preserveTags'] = true;
einzutragen.

Antwort von Maren Lange

Ja, da hast Du Recht. Danke für Deine Anmerkung.

Allerdings funktioniert der bisherige Weg in Contao 4 nach wie vor.

Da der "neue Weg" doch etwas mehr Erklärung Bedarf, werden wir dazu einen Extra-Blogbeitrag verfassen.

Fredi Gut

Hallo Christian
das funktioniert super! Ich benötige nun die gleiche Funkion in der Navigation. Ein kleiner Textteil soll durchgestrichen sein. Ist sowas auch möglich?
Danke im Voraus für die Hilfe

Christian Feneberg Antwort von Christian Feneberg

Hallo Fredi,

du kannst einen Eintrag in die dcaconfig.php setzen, dann kannst du im Seitennamen auch HTML-Tags verwenden und z.B. ein 'span' einfügen.

$GLOBALS['TL_DCA']['tl_page']['fields']['title']['eval']['preserveTags'] = true;

Markus

Für einfache Umbrüche in den Überschriften, reicht oft auch der Contao TAG {{br}}. Dieser fügt einen Zeilenumbruch an der Stelle ein. Andere TAGs müssen wie von Christian beschrieben über die Anpassung des DCA erfolgen.

Andrey

Hello Christian,
How to do it in Contao 4.4?

Christian Feneberg Antwort von Christian Feneberg

Hi Andrey,

you could use this feature in Contao 4.4 as in Contao 3.5.

  1. Create a new file dcaconfig.php in the folder[nbsp]system/config
  2. Add [lt]?php to the first line
  3. Insert the mentioned code
  4. Save the file
  5. Clear Contao 4 Cache with the Contao Manager

[nbsp]

[nbsp]

Einen Kommentar schreiben

Was ist die Summe aus 3 und 4?