CKEditor Bootstrap Grid
Un plugin de CKEditor 5 que permite a los editores de contenido crear fácilmente diseños de cuadrícula Bootstrap directamente dentro del editor WYSIWYG a través de una interfaz de diálogo intuitiva.
ckeditor_bs_grid
Instalar
composer require 'drupal/ckeditor_bs_grid:^2.0'
Overview
CKEditor Bootstrap Grid proporciona una integración perfecta entre el editor de texto enriquecido CKEditor 5 y el sistema de cuadrícula responsive de Bootstrap. Este módulo permite a los editores de contenido crear diseños de columnas complejos y responsivos sin escribir código HTML ni CSS.
El módulo agrega un botón Bootstrap Grid a la barra de herramientas de CKEditor que abre un diálogo de múltiples pasos para configurar los diseños de cuadrícula. Los usuarios pueden seleccionar el número de columnas (1-12), elegir entre preajustes de diseño predefinidos para cada breakpoint de Bootstrap y, opcionalmente, agregar contenedores con clases personalizadas. El marcado de cuadrícula generado utiliza las clases estándar de Bootstrap, asegurando compatibilidad con temas basados en Bootstrap.
Los usuarios avanzados pueden aplicar clases CSS personalizadas al contenedor envolvente, contenedor, fila y columnas individuales para un control de estilo detallado. El módulo soporta todos los breakpoints de Bootstrap 5 (xs, sm, md, lg, xl, xxl) e incluye opciones para contenedores fluidos y eliminación de gutters.
Features
- Agrega un botón Bootstrap Grid a la barra de herramientas de CKEditor 5 con un diálogo visual de selección de columnas
- Soporta diseños de 1-12 columnas con múltiples preajustes de ancho predefinidos por breakpoint
- Breakpoints responsivos configurables (xs, sm, md, lg, xl, xxl) con ajustes por formato de texto
- Opciones de contenedor incluyendo contenedor predeterminado, contenedor fluido y clases de envoltorio personalizadas
- Opción sin gutters para eliminar los espacios de la cuadrícula Bootstrap
- Ajustes avanzados para agregar clases CSS personalizadas al contenedor, fila y columnas individuales
- Integración opcional con CDN de Bootstrap para previsualización de estilos en el editor
- Previsualización visual del diseño en el diálogo de selección mostrando las proporciones de las columnas
- Integración con menú contextual para editar elementos de cuadrícula existentes
- Los elementos de cuadrícula existentes pueden modificarse preservando el contenido
Use Cases
Crear un Diseño de Contenido de Dos Columnas
Un editor de contenido necesita mostrar texto junto a una imagen en un diseño responsive. Hace clic en el botón Bootstrap Grid, selecciona 2 columnas, elige el preajuste de diseño 66%/33% para pantallas medianas y más grandes, y selecciona Ancho Completo para móvil. Después de guardar, coloca su contenido en cada columna.
Construir una Sección de Tarjetas de Características
Un constructor de sitios quiere crear una fila de 4 tarjetas de características. Usando el plugin Bootstrap Grid, crea una cuadrícula de 4 columnas con ancho igual en escritorio (lg y superior) y 2x2 en tablets (md), apilándose a ancho completo en móvil. Se agregan clases personalizadas a la fila para espaciado adicional.
Agregar una Sección de Contenedor de Ancho Completo
Para una página de aterrizaje de marketing, el editor crea una cuadrícula con un contenedor envolvente fluido, agrega una clase de color de fondo al contenedor envolvente y crea un diseño de 3 columnas dentro. La opción sin gutters elimina el espaciado entre columnas para un diseño sin costuras.
Diseño Responsive con Barra Lateral
El equipo de contenido necesita un área de contenido principal con una barra lateral. Crean una cuadrícula de 2 columnas con división 75%/25% en escritorio, 66%/33% en tablets y ancho completo apilado en móvil, con la barra lateral colapsando debajo del contenido principal.
Tips
- Asegúrate de que tu tema de frontend incluya CSS de Bootstrap o las clases de cuadrícula no se renderizarán correctamente en el sitio en vivo
- Usa la opción de CDN durante la edición de contenido si tu tema de administración no incluye Bootstrap
- El paso de Ajustes Avanzados permite agregar clases de utilidad como py-5 o bg-light para estilos rápidos
- Las cuadrículas existentes pueden editarse haciendo clic derecho y seleccionando Editar Cuadrícula desde el menú contextual
- Configura las columnas disponibles en los ajustes del formato de texto para simplificar la interfaz para los editores de contenido
- Los preajustes de diseño pueden personalizarse por sitio en /admin/config/content/ckeditor_bs_grid
Technical Details
Admin Pages 2
/admin/config/content/ckeditor_bs_grid
Configura los ajustes globales para el plugin CKEditor Bootstrap Grid incluyendo etiquetas de breakpoints, prefijos CSS y preajustes de diseño de columnas disponibles. Estos ajustes se aplican a todos los formatos de texto que usan el plugin Bootstrap Grid.
/admin/config/content/formats/manage/{format}
Ajustes por formato de texto para el plugin Bootstrap Grid, accesibles al configurar un formato de texto que usa CKEditor 5.
Permisos 1
Hooks 5
hook_help
Proporciona texto de ayuda para la página de ayuda del módulo
hook_theme
Registra el theme hook personalizado de etiqueta de elemento de formulario para opciones de cuadrícula
hook_preprocess_form_element
Agrega clases Bootstrap y theme hook personalizado para los botones radio de opciones de cuadrícula
hook_preprocess_form_element_label
Prepara los valores de opciones de diseño para la plantilla de previsualización visual de columnas
hook_config_schema_info_alter
Elimina la restricción SourceEditingRedundantTags para permitir elementos div de cuadrícula Bootstrap en la edición de código fuente
Troubleshooting 5
Habilita 'Usar CDN de BS' en los ajustes de Bootstrap Grid del formato de texto, o asegúrate de que tu tema de administración incluya el CSS de cuadrícula de Bootstrap.
Verifica los ajustes del filtro HTML de tu formato de texto. Asegúrate de que los elementos div con atributos class y data-* estén permitidos.
Asegúrate de haber arrastrado el botón Bootstrap Grid desde los botones disponibles a la barra de herramientas activa en la configuración del formato de texto.
Visita /admin/config/content/ckeditor_bs_grid y asegúrate de que los preajustes de diseño estén configurados para los breakpoints y cantidades de columnas habilitados.
Verifica que el CSS de Bootstrap 5 esté cargado en tu tema de frontend. El módulo solo agrega clases de Bootstrap; el CSS debe estar disponible.
Security Notes 2
- Las clases CSS personalizadas ingresadas en los Ajustes Avanzados se muestran directamente en el HTML. Asegúrate de que usuarios de confianza tengan acceso a la funcionalidad de edición de cuadrícula.
- El módulo elimina la restricción SourceEditingRedundantTags de CKEditor 5 para permitir el marcado de cuadrícula en el modo de edición de código fuente.