FontAwesome CKEditor dla TYPO3

Dlaczego FontAwesome w CKEditor pomaga redaktorom, ale kosztuje 300 KB wydajności

Redaktorzy chcą umieszczać ikony obok nagłówków, w tabelach i między akapitami tekstu. Bez pomocy technicznej kopiują obrazy ikon jako inline-images do RTE - z rozbitym layoutem i niespójnymi rozmiarami jako wynik. rte_ckeditor_fontawesome rozwiązuje ten problem czysto: redaktorzy wybierają ikony z katalogu FontAwesome bezpośrednio w CKEditor przez przycisk dialogowy i wstawiają je jako tag <i> w richtext. Ikony automatycznie skalują się z rozmiarem tekstu, są konfigurowalne kolorystycznie i działają w każdym elemencie treści.

Cena za to: cała biblioteka FontAwesome (ok. 300 KB jako webfont lub 180 KB jako SVG-sprite) jest ładowana na każdej stronie, nawet gdy używane są tylko 3 ikony. Dla stron krytycznych pod kątem wydajności to odczuwalny overhead.

Typowe scenariusze zastosowań

Listy ikon w opisach usług. Usługodawca opisuje swoje świadczenia listami ikon: haczyk przed każdą zaletą, koło zębate przed każdym krokiem procesu, ikona telefonu przed numerem kontaktowym. Redaktor wstawia ikony bezpośrednio w CKEditor, bez konieczności proszenia programisty.

Tabele porównawcze funkcji. Menedżerowie produktu zarządzają tabelami porównawczymi w CKEditor. Zamiast “Tak” i “Nie” używają zielonych haczyków i czerwonych krzyżyków. rte_ckeditor_fontawesome udostępnia te ikony z katalogu FontAwesome. Tabela staje się wizualnie natychmiast zrozumiała.

Szablony newsletterów z ikonami. Firmy pielęgnujące treści newsletterów w backendzie TYPO3 i wysyłające je przez rozszerzenie newsletterowe używają ikon FontAwesome do wizualnego wzbogacenia. Ponieważ ikony są wstawiane jako tagi <i>, działają w klientach e-mail wspierających webfonty.

Architektura techniczna

rte_ckeditor_fontawesome rozszerza CKEditor w backendzie TYPO3 o dodatkowy plugin. Plugin rejestruje przycisk w pasku narzędzi CKEditor, który otwiera dialog wyboru z funkcją wyszukiwania i filtrem kategorii.

Integracja działa na trzech poziomach: plugin CKEditor (plugin JavaScript dla CKEditor 4 w TYPO3 v10/v11 lub CKEditor 5 w TYPO3 v12+), wyjście HTML (przy wstawieniu tag <i> z odpowiednimi klasami CSS jest zapisywany w richtext) i renderowanie frontendowe (by ikony były widoczne we frontendzie, biblioteka CSS FontAwesome musi być załadowana na stronie - rozszerzenie nie dostarcza zasobów frontendowych).

Ważna uwaga dotycząca wersji CKEditor: TYPO3 v12 przechodzi z CKEditor 4 na CKEditor 5. Architektura pluginów zmieniła się fundamentalnie. Pluginy rte_ckeditor_fontawesome dla CKEditor 4 nie działają w CKEditor 5.

Częste problemy i rozwiązania

Ikony nie wyświetlają się we frontendzie. Najczęstsza przyczyna: CSS FontAwesome nie jest wbudowane w szablonie frontendowym. Rozszerzenie zajmuje się tylko częścią backendową (wybór ikon w CKEditor). Prezentacja frontendowa wymaga załadowania fontawesome.min.css i odpowiednich plików fontów w szablonie.

Ikony pojawiają się jako puste kwadraciki. Pliki fontów (woff2, woff) nie są prawidłowo ładowane. Często ścieżka w pliku CSS jest źle skonfigurowana lub serwer blokuje pliki fontów. Rozwiązanie: lokalne hostowanie FontAwesome zamiast przez CDN. To unika problemów CORS i jest bardziej zgodne z RODO.

Wpływ na wydajność przez FontAwesome. Kompletna instalacja FontAwesome ładuje ponad 300 KB (wszystkie kategorie ikon). Gdy strona używa tylko 10 ikon, 290 KB jest zmarnowane. Rozwiązanie: subsetting FontAwesome - kompilacja tylko używanych ikon w niestandardowy plik fontów. Alternatywnie: przejście na system ikon SVG osadzający tylko faktycznie używane ikony jako inline-SVG.

Migracja i kompatybilność wersji

rte_ckeditor_fontawesome jest dostępne dla TYPO3 v10 i v11 (CKEditor 4) jako stabilne rozszerzenie. Dla TYPO3 v12 (CKEditor 5) istnieją adaptacje, ponieważ architektura pluginów jest zupełnie nowa.

Dla TYPO3 v13 i dalszych Gosign zaleca fundamentalną ponowną ocenę podejścia. Zamiast ładować FontAwesome jako webfont, nowoczesne strony stawiają na systemy ikon SVG: każda ikona jest osadzana jako inline-SVG, ładowane są tylko używane ikony, rozmiar pliku spada z 300 KB na poniżej 10 KB.

Nakład migracji z FontAwesome na ikony SVG to typowo 2 do 3 dni: utworzenie SVG-sprite, dostosowanie widgetu CKEditor, zamiana istniejących tagów <i> w treści przez referencje <svg>. Gosign automatyzuje ostatni krok przez skrypt migracyjny identyfikujący i przepisujący wszystkie tagi <i class="fa-*"> w bazie danych. Dopasowany SVG-sprite z 30 ikonami waży 8 do 15 KB - pięćdziesiąta część kompletnej biblioteki FontAwesome.