CKEditor Accordion
Añade un widget de acordeón a CKEditor 5, permitiendo a los editores de contenido crear y mostrar secciones de contenido plegables utilizando una estructura limpia de marcado de lista de definiciones.
ckeditor_accordion
Install
composer require 'drupal/ckeditor_accordion:^2.3'
Overview
CKEditor Accordion integra un potente componente de acordeón en el editor de texto CKEditor 5 de Drupal. Este módulo permite a los editores de contenido crear secciones de contenido expandibles/plegables directamente dentro del editor WYSIWYG, facilitando la organización de contenido extenso en secciones interactivas y fáciles de digerir sin requerir conocimientos técnicos.
El widget de acordeón utiliza marcado HTML semántico de lista de definiciones (<dl>, <dt>, <dd>) para la estructura subyacente, asegurando accesibilidad y una estructura de contenido adecuada. En el editor, los usuarios ven una representación visual con áreas de título y contenido claramente etiquetadas, mientras que en el frontend se muestra un acordeón completamente interactivo con animaciones suaves.
El módulo proporciona una página de configuración donde los administradores pueden controlar el comportamiento predeterminado del acordeón, como si las pestañas comienzan plegadas, si múltiples pestañas pueden estar abiertas simultáneamente, efectos de animación y soporte para enlaces ancla a secciones específicas del acordeón mediante hashes en la URL.
Features
- Añade un botón de Acordeón a la barra de herramientas de CKEditor 5 para insertar widgets de acordeón
- Aparece una barra de herramientas contextual tipo globo al editar contenido del acordeón con opciones para añadir filas arriba/abajo o eliminar filas
- Utiliza marcado HTML semántico de lista de definiciones (dl, dt, dd) asegurando una estructura de documento adecuada y accesibilidad
- Transiciones animadas suaves de apertura/cierre con configuración de animación personalizable
- Soporte para enlaces profundos basados en hash de URL a pestañas específicas del acordeón (ej., #PreguntasFrecuentes)
- Estado predeterminado configurable: plegado o primera pestaña abierta
- Opción para mantener múltiples filas del acordeón abiertas simultáneamente o cerrar otras al abrir una
- Estilo azul minimalista fácilmente personalizable por desarrolladores de temas
- Dispara el evento JavaScript 'ckeditorAccordionAttached' cuando los acordeones se inicializan para integración con otros frameworks
- Soporte completo de navegación por teclado con pestañas del acordeón renderizadas como enlaces accesibles
- Ruta de actualización automatizada de CKEditor 4 a CKEditor 5 para una migración sin problemas
- La librería del frontend se adjunta automáticamente a todas las páginas que contienen contenido de acordeón
Use Cases
Creación de secciones de preguntas frecuentes
Usa el widget de acordeón para crear secciones de Preguntas Frecuentes donde cada pregunta es un título de acordeón plegable y la respuesta es el contenido expandible. Habilita 'Abrir pestañas con hash' para permitir enlaces directos a preguntas específicas (ej., tusitio.com/faq#ComoRestablezcoMiContrasena).
Descripciones de características de productos
Organiza la información del producto en secciones plegables para características, especificaciones, compatibilidad e información de soporte. Los usuarios pueden expandir solo las secciones que les interesan sin desplazarse por contenido extenso.
Tutoriales paso a paso
Crea tutoriales o guías de múltiples pasos donde cada paso es una fila del acordeón. Los usuarios pueden expandir pasos individuales mientras avanzan por el tutorial, manteniendo la página organizada y enfocada.
Términos y condiciones / Contenido legal
Presenta documentos legales extensos, términos de servicio o políticas de privacidad en formato de acordeón, organizando el contenido por tema. Esto mejora la legibilidad y permite a los usuarios navegar rápidamente a secciones específicas.
Páginas de documentación multitema
Crea páginas de documentación o ayuda que cubren múltiples temas. Cada fila del acordeón puede abordar un tema diferente, permitiendo a los usuarios encontrar y expandir rápidamente solo la información que necesitan.
Tips
- El acordeón usa marcado HTML de lista de definiciones (dl, dt, dd) que proporciona significado semántico - considera esto al planificar la estructura de tu contenido
- Sobrescribe el estilo azul predeterminado apuntando a las clases CSS .ckeditor-accordion-container en tu tema
- Habilita 'Mantener filas del acordeón abiertas' cuando los usuarios podrían querer comparar contenido entre múltiples secciones
- Usa títulos de acordeón significativos que funcionen como anclas hash cuando 'Abrir pestañas con hash' está habilitado, ya que los caracteres especiales se eliminan (ej., 'Preguntas Frecuentes' se convierte en #PreguntasFrecuentes)
- La barra de herramientas contextual aparece cuando tu cursor está dentro de un acordeón - úsala para añadir o eliminar filas rápidamente sin volver a la barra de herramientas principal
- Los acordeones anidados no están soportados por diseño - el módulo previene explícitamente colocar acordeones dentro de áreas de contenido de acordeón
- La duración de la animación está fijada en 300ms con una función de temporización ease-in-out; personaliza sobrescribiendo el JavaScript o CSS si es necesario
Technical Details
Admin Pages 1
/admin/config/content/ckeditor-accordion
Configura el comportamiento predeterminado de los acordeones creados usando el widget CKEditor Accordion. Estas configuraciones afectan cómo los acordeones se muestran y comportan en el frontend del sitio web.
Permissions 1
Hooks 1
hook_page_attachments_alter
Usado por el módulo para adjuntar la librería accordion.frontend y pasar las configuraciones del acordeón a drupalSettings en cada carga de página.
Troubleshooting 6
Asegúrate de haber añadido el botón Acordeón a la barra de herramientas activa en la configuración del formato de texto en /admin/config/content/formats. Edita el formato de texto deseado y arrastra el botón Acordeón desde los elementos disponibles a la barra de herramientas activa.
Verifica que la librería accordion.frontend se esté cargando. Limpia las cachés de Drupal y verifica que no haya errores de JavaScript en la consola del navegador. La librería debería adjuntarse automáticamente vía hook_page_attachments_alter.
Habilita 'Abrir pestañas con hash usando enlaces ancla o al cargar la página' en la configuración del módulo en /admin/config/content/ckeditor-accordion. Ten en cuenta que los títulos del acordeón se convierten en anclas hash eliminando espacios y caracteres especiales.
Si las animaciones parecen entrecortadas, intenta deshabilitar las animaciones en la configuración del módulo. Pueden ocurrir problemas de rendimiento en páginas con muchos acordeones o en dispositivos más lentos.
El módulo proporciona estilos predeterminados mínimos. Sobrescribe los selectores CSS .ckeditor-accordion-container y relacionados en tu tema. Añade !important si es necesario para sobrescribir los estilos del módulo.
El módulo incluye una ruta de actualización automatizada. Ejecuta las actualizaciones de base de datos después de actualizar para asegurar que el hook de actualización se ejecute. Si los problemas persisten, vuelve a guardar la configuración del formato de texto.
Security Notes 3
- El permiso 'administer ckeditor accordion' está marcado como acceso restringido y solo debe otorgarse a roles de administrador de confianza
- El módulo no sanitiza el contenido del acordeón - confía en el filtrado de formato de texto de Drupal para protección contra XSS
- Los parámetros hash de URL están codificados en URL para prevenir ataques de inyección cuando 'Abrir pestañas con hash' está habilitado