Editor Advanced Link
Mejora el diálogo de enlaces de CKEditor añadiendo soporte para atributos HTML adicionales como title, class, id, target, rel y aria-label.
editor_advanced_link
Install
composer require 'drupal/editor_advanced_link:^2.3'
Overview
Editor Advanced Link extiende el diálogo de enlaces predeterminado de CKEditor (tanto CKEditor 4 como CKEditor 5) para permitir a los editores de contenido establecer atributos HTML adicionales en elementos de ancla (<a>). Esto permite configuraciones de enlaces más sofisticadas directamente desde el editor WYSIWYG sin necesidad de editar HTML manualmente.
El módulo se integra inteligentemente con el sistema de formatos de texto de Drupal, mostrando únicamente los campos de atributos que están explícitamente permitidos por las restricciones HTML del formato de texto. Esto garantiza el cumplimiento de la seguridad mientras proporciona flexibilidad a los creadores de contenido que necesitan atributos de enlace avanzados.
Para CKEditor 5, el módulo proporciona un plugin dedicado que añade campos de formulario a la interfaz de globo de enlaces, con opciones avanzadas agrupadas en una sección plegable para una experiencia de usuario más limpia. El módulo también incluye características de accesibilidad como la adición automática de noopener al atributo rel al abrir enlaces en nuevas ventanas.
Features
- Añade campo de atributo title al diálogo de enlaces - permite texto de información emergente que aparece cuando los usuarios pasan el cursor sobre los enlaces
- Añade campo de clases CSS - permite aplicar clases de estilo personalizadas a enlaces individuales
- Añade campo de atributo ID - permite identificadores de fragmento para enlaces profundos a secciones específicas de contenido
- Añade casilla de atributo target - proporciona opción para abrir enlaces en nueva ventana/pestaña (target="_blank")
- Añade campo de atributo rel - soporta atributos de relación como noopener, nofollow o valores personalizados para galerías JavaScript
- Añade campo de etiqueta ARIA - permite texto alternativo accesible para lectores de pantalla
- Seguridad automática noopener - añade automáticamente noopener al atributo rel cuando se selecciona target="_blank"
- Integración con formato de texto - solo muestra campos para atributos permitidos por las restricciones HTML del formato de texto
- Soporte nativo de CKEditor 5 - proporciona un plugin dedicado de CKEditor 5 con integración de interfaz de globo
- Compatibilidad con módulo Linkit - funciona con el formulario de diálogo de enlaces del módulo Linkit 5.x
- Soporte de migración de CKEditor 4 a 5 - incluye plugin de ruta de actualización para migrar desde CKEditor 4 (obsoleto)
- Sección Avanzado plegable - agrupa atributos menos comunes en una sección plegable para una interfaz más limpia
Use Cases
Añadir clases de seguimiento a enlaces de marketing
Los equipos de marketing pueden añadir clases CSS específicas a los enlaces (por ejemplo, 'cta-button', 'campaign-summer-2024') directamente en el editor, permitiendo el seguimiento de analíticas y estilos dirigidos sin conocimientos de HTML.
Crear enlaces accesibles para lectores de pantalla
Los editores de contenido pueden proporcionar etiquetas ARIA para enlaces que necesitan texto descriptivo diferente del texto visible del enlace, mejorando la accesibilidad para usuarios con lectores de pantalla.
Abrir enlaces externos en nuevas pestañas
Los editores pueden configurar fácilmente enlaces externos para que se abran en nuevas ventanas/pestañas. El módulo añade automáticamente el atributo de seguridad 'noopener' para proteger contra ataques de reverse tabnapping.
Crear anclas de página para tabla de contenidos
Al añadir atributos ID a los enlaces, los editores pueden crear puntos de ancla que permiten a una tabla de contenidos enlazar a secciones específicas dentro de artículos largos.
Integración con galerías JavaScript
Usando el atributo rel, los editores pueden especificar relaciones como 'lightbox' o nombres de grupos de galería que las bibliotecas de galerías JavaScript usan para crear galerías de imágenes y visualizaciones modales.
Gestión de atributos de enlace para SEO
Los especialistas en SEO pueden añadir atributos rel='nofollow' o rel='sponsored' a enlaces salientes directamente desde el editor, cumpliendo con las directrices de motores de búsqueda sin editar HTML.
Tips
- Por seguridad, siempre asegúrese de que el valor 'noopener' se añada a rel cuando use target='_blank' - el módulo maneja esto automáticamente cuando ambos atributos están habilitados
- Al usar el atributo class, puede especificar múltiples clases CSS separadas por espacios
- El atributo ID debe ser único dentro de una página - use IDs significativos y descriptivos para beneficios de accesibilidad y SEO
- Considere habilitar solo los atributos que sus editores de contenido realmente necesitan para mantener simple el diálogo de enlaces
- El valor del atributo title aparece como información emergente al pasar el cursor - manténgalo conciso pero informativo
- Para máxima compatibilidad, configure su formato de texto para permitir todos los atributos que pueda necesitar: <a href title class id target rel aria-label>
Technical Details
Admin Pages 1
/admin/config/content/formats/manage/{format}
Configura los ajustes del plugin de CKEditor 5 de Enlaces avanzados para un formato de texto específico. Esta página permite a los administradores habilitar o deshabilitar atributos de enlace individuales que los editores de contenido pueden establecer al crear enlaces.
Hooks 2
hook_form_editor_link_dialog_alter
Altera el formulario del diálogo de enlaces de CKEditor para añadir campos de atributos adicionales. Este hook se implementa para añadir campos de title, class, id, target, rel y aria-label basándose en las restricciones HTML del formato de texto.
hook_form_linkit_editor_dialog_form_alter
Proporciona compatibilidad con el módulo Linkit 5.x aplicando las mismas alteraciones del diálogo de enlaces al formulario de diálogo del editor de Linkit.
Troubleshooting 5
Asegúrese de que: 1) Los atributos deseados estén habilitados en la configuración del plugin de CKEditor 5 del formato de texto en 'Enlaces avanzados', 2) El filtro 'Limitar etiquetas HTML permitidas' del formato de texto permita estos atributos en el elemento <a> (por ejemplo, <a href title class id target rel aria-label>).
Verifique que las etiquetas HTML permitidas del formato de texto incluyan los atributos específicos que está intentando usar. Por ejemplo, para permitir clases, el allowed_html debe incluir '<a class>' o '<a class="*">' para cualquier valor de clase.
La sección Avanzado solo aparece cuando al menos uno de sus atributos agrupados (aria-label, class, id, target, rel) está habilitado. Habilite estos atributos tanto en la configuración del plugin como en el HTML permitido del formato de texto.
La adición automática de noopener solo funciona cuando ambos atributos target y rel están habilitados. Asegúrese de que ambos campos estén permitidos en la configuración del formato de texto.
Después de actualizar a CKEditor 5, necesita reconfigurar los ajustes del plugin de Enlaces avanzados en cada formato de texto. La configuración de CKEditor 4 no se migra automáticamente.
Security Notes 4
- El módulo sugiere automáticamente añadir 'noopener' al atributo rel cuando se marca target='_blank', protegiendo contra ataques de reverse tabnapping
- Los valores de atributos están sujetos al filtrado del formato de texto de Drupal - solo pueden usarse atributos explícitamente permitidos en las restricciones HTML del formato de texto
- Los atributos class e id aceptan cualquier valor si están permitidos - considere implementar validación adicional si necesita restringir qué clases o IDs pueden usarse
- Siempre revise los permisos del formato de texto para asegurarse de que solo los roles de confianza puedan usar formatos con atributos de enlace avanzados habilitados