Font Awesome Icons im TinyMCE einfügen
- 4.13
- 5.3
Lösung: TinyMCE-Template anpassen
Du musst die Konfiguration des TinyMCE entsprechend anpassen. Gehe dazu wie folgt vor:
Erstelle ein neues Template be_tinyMCE.html5.
(Templates > Neues Template > be_tinyMCE.html5)
Die Template-Datei muss nun über den Quelltext-Editor bearbeitet werden.
Entscheidend ist jetzt der Abschnitt extended_valid_elements. Hier muss der Eintrag für das i-Tag ergänzt werden: i[class]
Damit wir jetzt nicht das komplette be_tinyMCE.html5 überschreiben, nutzen wir die Möglichkeit von Contao, nur einzelne Blöcke zu überschreiben. D. h. wir verwenden in unserem Template nur den Block valid_elements. (siehe auch: Contao Dokumentation)
<?php $this->block('valid_elements'); ?>
extended_valid_elements: 'q[cite|class|title],article,section,hgroup,figure,figcaption,i[class]',
<?php $this->endblock(); ?>Das komplette Template sieht dann so aus:
<?php $this->extend('be_tinyMCE'); ?>
<?php $this->block('valid_elements'); ?>
extended_valid_elements: 'q[cite|class|title],article,section,hgroup,figure,figcaption,i[class]',
<?php $this->endblock(); ?>Ab sofort kannst du im TinyMCE in der Quellcode-Ansicht dein Font Awesome Code einfügen.
Alternativ kannst du dir auch einmal eine der folgenden beiden Erweiterungen ansehen:
Mit Hilfe der Erweiterungen lassen sich die Font Awesome Icons per Insert-Tags einfügen.
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.
Ü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.
Einen Kommentar schreiben