CKEditor 5 Icons: Un selector de iconos Font Awesome rápido y nativo
Un selector de iconos Font Awesome rápido y nativo para CKEditor 5, que permite a los usuarios explorar, buscar e insertar iconos directamente dentro del editor.
ckeditor5_icons
Instalar
composer require 'drupal/ckeditor5_icons:^1.2'
Overview
CKEditor 5 Icons es un módulo potente que integra los iconos de Font Awesome directamente en la experiencia de edición de CKEditor 5. Construido utilizando las APIs modernas de TypeScript de CKEditor 5, proporciona un selector de iconos fluido que permite a los editores de contenido explorar, buscar y seleccionar iconos de Font Awesome sin salir de la interfaz del editor.
El módulo es compatible con Font Awesome 5 y Font Awesome 6, incluyendo versiones gratuitas y Pro. Los iconos se pueden insertar en línea con el texto, y su tamaño, estilo y alineación se pueden modificar fácilmente usando una barra de herramientas de widget conveniente que aparece cuando se selecciona un icono. El selector de iconos incluye filtrado por categorías, búsqueda en tiempo real y una categoría "Recomendados" personalizable para los iconos de uso frecuente.
El rendimiento está optimizado mediante la carga asíncrona de metadatos, que reduce los tiempos de carga inicial de la página al obtener los datos de iconos solo cuando se abre el selector. Los metadatos también son almacenados en caché por los navegadores para solicitudes posteriores.
Features
- Selector de iconos Font Awesome nativo integrado directamente en la barra de herramientas de CKEditor 5
- Compatibilidad con Font Awesome 5 (v5.15.4) y Font Awesome 6 (v6.7.2)
- Explora iconos por categorías o busca por nombre de icono y palabras clave
- Barra de herramientas de widget para modificar el tamaño, estilo y alineación del icono después de insertarlo
- 14 opciones de tamaño desde Extra Pequeño hasta 10x
- 3 opciones de alineación: en línea con el texto, flotante a la izquierda o flotante a la derecha
- 7 opciones de estilo: Solid, Regular, Light, Thin, Duotone, Brands y Custom (los estilos Pro requieren Font Awesome Pro)
- Categoría "Recomendados" configurable para acceso rápido a los iconos de uso frecuente
- Carga asíncrona de metadatos para rendimiento optimizado de la página con almacenamiento en caché del navegador
- Integración con el módulo Font Awesome Icons para metadatos personalizados/Pro
- Los iconos se generan como elementos HTML estándar <i> con clases de Font Awesome
- Compatibilidad total con los plugins General HTML Support y Link
Use Cases
Agregar iconos al contenido
Los editores de contenido pueden hacer clic en el botón Icons en la barra de herramientas de CKEditor 5 para abrir el selector de iconos. Pueden explorar iconos por categoría, buscar por nombre o palabras clave, y hacer clic para insertar el icono seleccionado en la posición del cursor. Los iconos se insertan en línea con el texto.
Dar estilo a los iconos después de insertarlos
Después de insertar un icono, al hacer clic en él se muestra una barra de herramientas de widget con menús desplegables para cambiar el tamaño del icono (Extra Pequeño hasta 10x), la alineación (en línea, flotante izquierda, flotante derecha) y el estilo (Solid, Regular, Brands, etc.).
Crear una lista de iconos recomendados
Los administradores del sitio pueden configurar una categoría Recomendados en los ajustes del formato de texto para proporcionar acceso rápido a los iconos de uso frecuente. Esto es útil para mantener una iconografía consistente en todo el contenido.
Usar iconos Font Awesome Pro
Los sitios con Font Awesome Pro pueden instalar el módulo contrib Font Awesome Icons y establecer la fuente de metadatos en Custom en la configuración del plugin Icons. Esto habilita el acceso a los estilos exclusivos de Pro como Light, Thin y Duotone.
Optimizar el rendimiento de carga de página
Por defecto, los metadatos de iconos se cargan de forma asíncrona cuando el selector se abre por primera vez, en lugar de en cada carga de página. Esto reduce significativamente el tamaño inicial de la página y es recomendado para sitios en producción.
Tips
- Usa la función de búsqueda en el selector de iconos para encontrar rápidamente iconos por nombre o términos relacionados
- Los iconos se pueden colocar dentro de enlaces insertando primero el icono, luego seleccionándolo y usando el botón de enlace
- Para mejor rendimiento, mantén la opción 'Cargar metadatos de forma asíncrona' habilitada en producción
- La categoría Recomendados es útil para crear un conjunto curado de iconos aprobados por la marca para los editores de contenido
- Los iconos usan clases CSS estándar de Font Awesome, por lo que cualquier personalización de tema de Font Awesome se aplicará automáticamente
Technical Details
Admin Pages 1
/admin/config/content/formats/manage/{format_id}
Configura los ajustes del plugin CKEditor 5 Icons dentro de la configuración de CKEditor 5 de un formato de texto. Los ajustes del plugin Icons aparecen cuando agregas el botón Icons a la barra de herramientas.
Troubleshooting 4
Asegúrate de que la biblioteca CSS de Font Awesome esté correctamente cargada en tu sitio. Esto se puede hacer mediante el CSS de tu tema, un enlace CDN o el módulo contrib Font Awesome Icons. La versión seleccionada en los ajustes del plugin debe coincidir con la versión de la biblioteca cargada.
Instala y configura el módulo contrib Font Awesome Icons, luego establece la fuente de metadatos en 'Custom' en los ajustes del plugin Icons. Asegúrate de que tu kit de Font Awesome Pro o CSS esté correctamente cargado.
Intenta deshabilitar 'Cargar metadatos de forma asíncrona' en los ajustes del plugin como paso de solución de problemas. Revisa la consola del navegador en busca de errores de token CSRF o problemas de red con el endpoint de metadatos.
Esto puede ocurrir si el nombre del icono no se reconoce en los metadatos. Asegúrate de que el icono existe en la versión seleccionada de Font Awesome y que los metadatos se están cargando correctamente.