CKEditor Tamaño y Familia de Fuente
Añade botones desplegables de Tamaño de Fuente, Familia de Fuente, Color de Fuente y Color de Fondo de Fuente a CKEditor 5.
ckeditor_font
Instalar
composer require 'drupal/ckeditor_font:8.x-1.5'
composer require 'drupal/ckeditor_font:8.x-1.3'
Overview
El módulo CKEditor Font Size and Family habilita la funcionalidad de personalización de fuentes en el editor WYSIWYG CKEditor 5. Proporciona cuatro botones de barra de herramientas que permiten a los creadores de contenido aplicar varios estilos de fuente, tamaños y colores a su texto.
El módulo añade desplegables de Tamaño de Fuente y Familia de Fuente que aplican estilos CSS como estilos de elementos inline. La colección predeterminada incluye fuentes serif populares (Times New Roman, Georgia), fuentes sans-serif (Arial, Verdana, Tahoma) y fuentes monoespaciadas (Courier New). También están disponibles selectores de Color de Fuente y Color de Fondo de Fuente para el estilizado del texto.
Aviso Importante: Este módulo está obsoleto. Para sitios nuevos, se recomienda encarecidamente usar el módulo CKEditor5 Plugin Pack mantenido por el equipo de CKSource. Este módulo solo debe usarse para sitios existentes que necesitan hacer la transición a otros módulos en un futuro cercano.
Features
- Desplegable de Tamaño de Fuente con opciones de tamaño personalizables (soporta unidades px, em, rem, pt, % y palabras clave CSS como small, medium, large)
- Desplegable de Familia de Fuente con opciones de fuentes serif, sans-serif y monoespaciadas
- Selector de Color de Fuente para aplicar colores de texto usando valores de color RGB, HSL o hexadecimales
- Selector de Color de Fondo de Fuente para resaltar texto con colores de fondo (solo CKEditor 5)
- Listas de fuentes personalizables para cada formato de texto
- Opción para soportar todos los valores de tamaño de fuente (permite pegar contenido con cualquier tamaño de fuente sin eliminarlo)
- Opción para soportar todos los valores de familia de fuente (permite pegar contenido con cualquier familia de fuente sin eliminarlo)
- Ruta de actualización automática desde la configuración de CKEditor 4 a CKEditor 5
- Columnas del selector de color y límites de colores del documento configurables
Use Cases
Añadir familias de fuentes personalizadas para consistencia de marca
Las organizaciones pueden configurar fuentes de marca específicas en el editor para asegurar que los creadores de contenido usen tipografía aprobada. Configure el campo de Familias de fuentes con las fuentes de su marca como 'Open Sans, sans-serif' y 'Roboto, sans-serif' para que estén disponibles en el desplegable.
Controlar opciones de tamaño de fuente para accesibilidad
Limite los tamaños de fuente disponibles a un conjunto predefinido que cumpla con las directrices de accesibilidad. Configure tamaños como '16px|Normal', '18px|Grande', '20px|Extra Grande' para asegurar que el contenido mantenga tamaños legibles y estilos consistentes.
Habilitar resaltado de texto para contenido educativo
Use la función de Color de Fondo de Fuente para permitir que los creadores de contenido resalten texto importante en materiales educativos. Configure colores de resaltado como '#FFFF00|Resaltado Amarillo' y '#90EE90|Resaltado Verde'.
Migrar de CKEditor 4 a CKEditor 5
El módulo proporciona una ruta de actualización automática para sitios que migran de Drupal 9 con CKEditor 4 a Drupal 10/11 con CKEditor 5. Las configuraciones de los botones Font y FontSize se mapean automáticamente a los nuevos elementos de barra de herramientas fontSize y fontFamily.
Preservar el formato del contenido pegado
Habilite las opciones 'Soportar todos los valores de Tamaño de Fuente' y 'Soportar todos los valores de Familia de Fuente' para preservar el formato cuando los usuarios peguen contenido de fuentes externas como Microsoft Word o Google Docs.
Tips
- Considere usar fuentes web seguras o asegúrese de que las fuentes personalizadas se carguen a través de su tema para garantizar que se muestren correctamente para todos los usuarios
- Use la configuración de 'Número de columnas' para organizar las paletas de colores en un diseño de cuadrícula visualmente atractivo
- Establezca 'Máximo de colores disponibles' en 0 para deshabilitar la función de colores del documento si desea limitar a los usuarios solo a colores predefinidos
- Al migrar a CKEditor 5, pruebe la actualización automática comparando la renderización de fuentes antes y después de la migración
- Para sitios Drupal nuevos, considere usar el módulo CKEditor5 Plugin Pack en su lugar, ya que este módulo está obsoleto
Technical Details
Admin Pages 1
/admin/config/content/formats/manage/{format}
Configura los ajustes de fuente de CKEditor para un formato de texto específico. Esta página permite añadir botones de fuente a la barra de herramientas del editor y personalizar las opciones de fuente disponibles.
Hooks 1
hook_help
Proporciona contenido de página de ayuda para el módulo en admin/help/ckeditor_font, explicando características, configuración y ejemplos de uso.
Troubleshooting 5
Asegúrese de haber arrastrado los botones de fuente desde 'Botones disponibles' a 'Barra de herramientas activa' en la configuración del formato de texto. También verifique que el módulo esté habilitado y que el formato de texto esté usando CKEditor 5.
Habilite la casilla 'Soportar todos los valores de Tamaño de Fuente' en la configuración de Tamaño y Familia de Fuente. Esto permite que el editor preserve los tamaños de fuente que no están en su lista configurada.
Verifique que la sintaxis de sus colores sea correcta. Los colores deben estar en el formato 'rgb(255,255,255)|Etiqueta' o '#000000|Etiqueta' o 'hsl(0,0%,0%)|Etiqueta'. Cada color debe estar en una línea separada.
Verifique que la sintaxis de su tamaño de fuente sea correcta (ej. '16px|Normal'). Una sintaxis inválida impedirá que se guarde la configuración. Asegúrese de estar usando unidades soportadas: px, em, rem, pt, o %.
El módulo proporciona rutas de actualización automáticas. Si la configuración no se migró, reconfigure manualmente las opciones de fuente en los ajustes de formato de texto para CKEditor 5.
Security Notes 3
- El estilizado de fuentes se aplica como estilos CSS inline en elementos span, que es el comportamiento estándar de CKEditor
- El módulo depende del filtrado de formato de texto de Drupal para asegurar que solo se rendericen elementos HTML y estilos permitidos
- Los valores de color se validan usando patrones regex para prevenir la inyección de contenido malicioso