CKEditor Anchor Link
Proporciona un diálogo de enlaces mejorado y funcionalidad de anclas para CKEditor 5 en Drupal, permitiendo a los usuarios crear anclas con nombre y enlazar a ellas dentro de las páginas.
anchor_link
Install
composer require 'drupal/anchor_link:^3.0'
Overview
El módulo CKEditor Anchor Link extiende CKEditor 5 en Drupal con capacidades mejoradas de gestión de enlaces y creación de anclas. Proporciona una interfaz de diálogo fácil de usar para insertar y editar tanto anclas (ubicaciones con nombre dentro de una página) como enlaces con diversas propiedades.
El módulo permite a los editores de contenido crear anclas con IDs y nombres personalizados, que luego pueden ser enlazadas desde cualquier lugar en la misma página u otras páginas usando la sintaxis estándar de anclas (#nombre-del-ancla). Esto es particularmente útil para crear tablas de contenido, secciones de preguntas frecuentes o cualquier contenido extenso donde se necesite navegación dentro de la página.
El diálogo de enlaces mejorado soporta múltiples protocolos de URL incluyendo HTTP, HTTPS, FTP y protocolos de noticias, así como enlaces mailto para direcciones de correo electrónico y enlaces tel para números de teléfono. La integración con el menú contextual permite editar o eliminar rápidamente enlaces y anclas existentes directamente desde el editor.
Features
- Crea anclas con nombre usando elementos <a> con atributos id y name para destinos de navegación dentro de la página
- Diálogo de enlaces mejorado que soporta múltiples protocolos de URL (http, https, ftp, news) y tipos especiales de enlaces (mailto, tel)
- Integración con menú contextual para editar y eliminar enlaces y anclas directamente dentro del editor
- Soporte de edición con doble clic - al hacer doble clic en un ancla o enlace se abre el diálogo correspondiente
- Indicadores visuales de anclas en el editor con estilo distintivo para identificar las posiciones de las anclas
- Soporte de migración de CKEditor 4 a CKEditor 5 - convierte automáticamente los botones de ancla durante las actualizaciones de formato
- Integración con el módulo Linkit - proporciona coincidencia de enlaces de ancla para sugerencias de autocompletado dentro del diálogo de Linkit
- Internacionalización completa con traducciones para 67 idiomas
- Soporte para enlaces de ancla con contenido de texto opcional o anclas vacías (marcadores visuales)
- Previene conflictos con General HTML Support (GHS) al deshabilitar explícitamente los atributos relacionados con anclas del control de GHS
Use Cases
Tabla de contenidos con enlaces de salto
Los editores de contenido pueden crear una tabla de contenidos al principio de artículos largos: 1) Colocando puntos de ancla en cada encabezado de sección usando el botón Anchor, 2) Creando una lista de enlaces en la parte superior que apunten a estas anclas usando el formato #nombre-del-ancla. Los lectores pueden entonces hacer clic en los enlaces para saltar directamente a secciones específicas.
Página de preguntas frecuentes con navegación rápida
Construye una página de FAQ donde cada pregunta tenga un ancla, permitiendo: 1) Enlaces directos desde otras páginas a preguntas específicas (ej., /faq#politica-de-devoluciones), 2) Un menú de navegación rápida en la parte superior de la página de FAQ, 3) Enlaces 'Volver arriba' después de cada respuesta apuntando a un ancla superior.
Enlaces profundos entre páginas
Crea enlaces desde una página a una sección específica de otra página. Por ejemplo, enlazar desde una página de producto directamente a la sección relevante de términos y condiciones usando la URL completa con ancla (ej., /terminos#seccion-garantia).
Navegación de aplicación de página única
Para páginas de destino o sitios web de una sola página, crea navegación fluida basada en secciones usando anclas en cada sección de contenido y un menú de navegación fijo con enlaces a cada ancla.
Tips
- Usa nombres de ancla descriptivos y amigables para URLs (ej., 'seccion-precios' en lugar de 'seccion1') para mejor SEO y mantenibilidad
- El nombre del ancla se convierte tanto en el atributo 'id' como 'name' del elemento <a> para máxima compatibilidad con navegadores
- Haz doble clic en un ancla o enlace existente en CKEditor para editarlo rápidamente
- Haz clic derecho en enlaces o anclas para acceder a las opciones del menú contextual para edición o eliminación
- Al usar con el módulo Linkit, puedes buscar nombres de ancla en el diálogo de enlace para obtener sugerencias de autocompletado
- Los atajos de teclado Ctrl+L o Ctrl+K abren el diálogo de enlace para inserción rápida de enlaces
- Considera añadir CSS para estilizar visualmente los destinos de ancla (usando la pseudo-clase :target) para mejor experiencia de usuario al saltar a secciones
Technical Details
Hooks 2
hook_help
Implementa hook_help() para proporcionar texto de ayuda en la página de ayuda del módulo, describiendo la funcionalidad del módulo para insertar enlaces y anclas.
hook_ckeditor5_plugin_info_alter
Altera las definiciones de plugins de CKEditor 5 para prevenir que el plugin General HTML Support (GHS) controle los atributos específicos de ancla (id, name) y la clase ck-anchor, asegurando que el plugin de ancla mantenga el control sobre estos elementos.
Troubleshooting 5
Asegúrate de que el filtro 'Limitar etiquetas HTML permitidas' de tu formato de texto incluya el atributo 'name' en los elementos <a>. Configura el HTML permitido para incluir: <a name href hreflang target rel>
Verifica que la biblioteca externa esté instalada correctamente en /libraries/ckeditor5-anchor-drupal/. Comprueba que el módulo esté habilitado y que la barra de herramientas esté configurada para incluir el botón Anchor en la configuración de tu formato de texto.
Asegúrate de que wikimedia/composer-merge-plugin esté instalado y configurado correctamente en la sección extra de tu composer.json para incluir el composer.libraries.json del módulo. Puede ser necesario ejecutar composer update dos veces para que el merge plugin reconozca el nuevo requerimiento de biblioteca.
El módulo incluye soporte de migración automática. Ejecuta el proceso de actualización del formato de texto nuevamente, o añade manualmente el elemento de barra de herramientas 'anchor' a tu configuración de CKEditor 5 después de la migración.
Este es el comportamiento esperado para anclas vacías. CKEditor convierte las anclas vacías en elementos de imagen falsos para facilitar la selección y edición. La salida HTML real contendrá elementos <a name="..."> correctos.
Security Notes 3
- El módulo respeta el filtrado de formato de texto - asegúrate de que la configuración de etiquetas HTML permitidas sea apropiadamente restrictiva
- Los enlaces de protocolo JavaScript (javascript:) están bloqueados por defecto en el diálogo de enlace por seguridad
- El módulo previene que General HTML Support sobrescriba el manejo de atributos de ancla, manteniendo un comportamiento de seguridad consistente