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.
Über den Autor
Christian Feneberg ist der Gründer der Contao Academy und erstellt seit 2010 Websites mit Contao. Zudem gehört er zum Team von trakked.io. Abseits von Contao verbringt er gerne Zeit mit seiner Familie und widmet sich der Persönlichkeitsentwicklung.
Folge Christian jetzt bei LinkedIn.
Einen Kommentar schreiben