FontAwesome CKEditor para TYPO3

Por que FontAwesome no CKEditor beneficia editores, mas custa 300 KB de performance

Editores querem colocar ícones ao lado de títulos, em tabelas e entre parágrafos de texto. Sem ajuda técnica, copiam imagens de ícones como inline images no RTE - com layout quebrado e tamanho inconsistente como resultado. rte_ckeditor_fontawesome resolve o problema de forma limpa: editores escolhem ícones do catálogo FontAwesome diretamente no CKEditor via botão de diálogo e os inserem como tag <i> no richtext. Os ícones escalam automaticamente com o tamanho do texto, são ajustáveis em cor e funcionam em qualquer elemento de conteúdo.

O preço: toda a biblioteca FontAwesome (aprox. 300 KB como webfont ou 180 KB como SVG sprite) é carregada em cada página, mesmo que apenas 3 ícones sejam usados. Para sites com foco em performance, isso é um overhead perceptível.

Cenários típicos de uso

Listas com ícones em descrições de serviços. Um prestador de serviços descreve suas ofertas com listas de ícones: check antes de cada vantagem, engrenagem antes de cada etapa do processo, ícone de telefone antes do número de contato. O editor insere os ícones diretamente no CKEditor, sem precisar pedir a um desenvolvedor.

Tabelas comparativas de recursos. Gerentes de produto mantêm tabelas comparativas no CKEditor. Em vez de “Sim” e “Não”, usam ícones de check verde e X vermelho. rte_ckeditor_fontawesome disponibiliza esses ícones via catálogo FontAwesome. A tabela torna-se visualmente compreensível imediatamente.

Templates de newsletter com ícones. Empresas que mantêm conteúdo de newsletter no backend TYPO3 e enviam via extensão de newsletter usam ícones FontAwesome para atratividade visual. Como os ícones são inseridos como tags <i>, funcionam em clientes de e-mail que suportam webfonts.

Arquitetura técnica

rte_ckeditor_fontawesome estende o CKEditor no backend TYPO3 com um plugin adicional. O plugin registra um botão na toolbar do CKEditor que abre um diálogo de seleção.

A integração funciona em três níveis: plugin CKEditor (JavaScript para CKEditor 4 no TYPO3 v10/v11 ou CKEditor 5 no TYPO3 v12+, com diálogo de seleção de ícones com função de busca), saída HTML (ao inserir, um tag <i> com as classes CSS correspondentes é escrito no richtext: <i class="fas fa-check"></i>) e renderização frontend (para que os ícones sejam visíveis no frontend, a biblioteca CSS FontAwesome deve estar carregada no site - a extensão não inclui os assets frontend).

Observação importante sobre a versão CKEditor: TYPO3 v12 troca de CKEditor 4 para CKEditor 5. A arquitetura de plugins mudou fundamentalmente. Plugins rte_ckeditor_fontawesome para CKEditor 4 não funcionam no CKEditor 5.

Problemas frequentes e soluções

Ícones não são exibidos no frontend. Causa mais frequente: CSS FontAwesome não está incluído no template frontend. A extensão cuida apenas da parte backend (seleção de ícones no CKEditor). A exibição frontend requer que fontawesome.min.css e os arquivos de fonte correspondentes sejam carregados no template. Solução: adicionar FontAwesome como include CSS via TypoScript.

Ícones aparecem como quadrados vazios. Os arquivos de fonte (woff2, woff) não estão sendo carregados corretamente. Frequentemente o caminho no arquivo CSS está mal configurado, ou o servidor web bloqueia arquivos de fonte (headers CORS ausentes em integração via CDN). Solução: hospedar FontAwesome localmente em vez de via CDN. Isso evita problemas de CORS e é mais conforme com a LGPD (PT: RGPD).

Impacto de performance por FontAwesome. Uma instalação FontAwesome completa carrega mais de 300 KB (todas as categorias de ícones). Se o site usa apenas 10 ícones, 290 KB são desperdiçados. Solução: usar subsetting FontAwesome - compilar apenas os ícones utilizados em um arquivo de fonte personalizado. Alternativa: migrar para um sistema de ícones SVG que incorpora apenas os ícones realmente usados como inline SVG.

Migração e compatibilidade de versões

rte_ckeditor_fontawesome está disponível como extensão estável para TYPO3 v10 e v11 (CKEditor 4). Para TYPO3 v12 (CKEditor 5) existem adaptações, pois a arquitetura de plugins é completamente nova.

Para TYPO3 v13 e além, a Gosign recomenda uma reavaliação fundamental da abordagem. Em vez de carregar FontAwesome como webfont, sites modernos usam sistemas de ícones SVG: cada ícone é incorporado como inline SVG, apenas os ícones usados são carregados, o tamanho do arquivo cai de 300 KB para menos de 10 KB.

O esforço de migração de FontAwesome para ícones SVG é tipicamente de 2 a 3 dias: criar SVG sprite, adaptar widget CKEditor, substituir tags <i> existentes no conteúdo por referências <svg>. A Gosign automatiza a última etapa via script de migração que identifica todos os tags <i class="fa-*"> no banco de dados e os reescreve.

Na decisão entre FontAwesome e ícones SVG, vale olhar os números: FontAwesome Free contém mais de 2.000 ícones. Um site corporativo típico usa de 15 a 30 deles. O restante todos os visitantes pagam em tempo de carregamento. Um SVG sprite customizado com 30 ícones pesa 8 a 15 KB - um cinquentésimo da biblioteca FontAwesome completa.