CKEditor in TYPO3 für Font Awesome Icons konfigurieren

Möchte man hin und wieder ein Icon, z.B. von Font Awesome im CKEditor verwenden, so ist das gar nicht so einfach. Der Editor in der Standardkonfiguration (Default.yaml) geht nämlich mit den im Quelltext eingegebenen i-Tags beim Speichern recht eigenwillig um.

Natürlich könnte man zu einer Extension greifen: https://extensions.typo3.org/extension/rte_ckeditor_fontawesome/ Aber wir möchten das ja nur hin und wieder machen, die Redakteurinnen und Redakteure sind mit der Verwendung des Quelltextes im Editor vertraut und je weniger Extensions desto besser.

Font Awesome Icons werden normalerweise mit dieser Syntax eingebunden:

<i class="fa fa-tree" aria-hidden="true"></i>

Genauso würde aber auch

<span class="fa fa-tree" aria-hidden="true"></span>

oder

<em class="fa fa-tree" aria-hidden="true"></em>

funktionieren.

In der Default Konfiguration des CKEditors funktioniert lediglich das em-Tag – dieses wird standardmäßig für Kursiv Schreibung verwendet; span-Tags werden beim Speichern eliminiert, i-Tags zu em-Tags umgewandelt.

Die einfachste Variante ist also im Quelltext des CKEditors folgendes einzugeben:

<i class="fa fa-tree" aria-hidden="true">&nbsp;</i>

Wichtig ist hier das

&nbsp;

innerhalb des i – ansonsten ist das Element nach dem Speichern im Quelltext des CKEditors nicht mehr zu sehen – im Frontend angezeigt wird es dennoch.

Schreibt man also das

&nbsp;

in das Tag hinein, bleibt es im Quelltext des Editors sichtbar. Für die Frontendausgabe macht das keinen Unterschied.

Kurz: in der Default Konfiguration des CKEditors funktioniert für ein Font Awesome Icon folgendes:

<i class="fa fa-tree" aria-hidden="true">&nbsp;</i>

Das Ergebnis nach dem Speichern sieht so aus:

<em class="fa fa-tree">&nbsp;</em>.

Man bemerke, dass außer der Umwandlung von i in em auch das aria-hidden="true" verschwunden ist. Hat man leidensfähige RedakteurInnen kann man ihnen das eventuell zumuten, ohne an der Konfiguration etwas anpassen zu müssen.

Möchte man aber sowohl das i als auch das aria-hidden="true" im Quelltext behalten, so ist in der Konfiguration folgendes zu ergänzen:

editor:
  config:
    extraAllowedContent:
      - i(*)[*]

    coreStyles_italic:
      element: 'i'

Leere i-Tags im CKEditor nicht entfernen

Jetzt kann man auch noch dafür sorgen, dass ein leeres

<i></i>

nicht mehr entfernt wird. Zu diesem Zweck muss man ein Mini-Plugin schreiben (plugin.js):

(function () {
    CKEDITOR.dtd.$removeEmpty.i = 0;
    CKEDITOR.plugins.add('dont_remove_empty_i', {
 
    });
})();

und in der yaml Datei bekannt machen:

editor:
  externalPlugins:
    dont_remove_empty_i: { resource: "EXT:my_sitepackage/Resources/Public/JavaScript/CKEditor/plugin.js" }

Links:
https://github.com/DirkPersky/typo3-rte-ckeditor-fontawesome
https://gist.github.com/peterkraume/95106c5b27615e06dcfcb01a62b2a30c