CKEditor 5 Column Layout
This module integrates a flexbox-based column layout system directly into the CKEditor 5 interface, allowing content creators to easily build responsive multi-column designs without needing to code. It provides intuitive controls for managing columns and defining how they stack on different devices, ensuring content looks good across all screen sizes.
The CKEditor 5 Column Layout module provides a modern, flexbox-based grid system directly inside the Drupal editor. It solves the common problem of creating mobile-ready, multi-column content without requiring users to write HTML or CSS. By providing a WYSIWYG interface for responsive design, it empowers content creators to build professional layouts that look great on smartphones, tablets, and desktops.
Features
- Responsive Breakpoint Control: Use a dedicated modal to define column stacking behavior for Mobile, Tablet, Laptop, and Desktop views.
- Dynamic Column Management: Add or remove columns with a single click using intuitive editor-side buttons.
- Live Preview: See your layout structure immediately within the CKEditor 5 workspace.
- Automatic Cleanup: A specialized filter ensures that editor-only UI components (like configuration buttons) never appear on the public-facing site.
- Security Hardened: Built-in XSS protection validates data attributes to ensure your layouts remain safe and performant.
Installation
Install as you would any contributed Drupal module. See Installing Drupal Modules.
composer require drupal/ck5_column_layoutEnable the module using Drush:
drush en ck5_column_layoutPost-Installation
After installation, you must configure your Text Formats to make the column tools available:
- Go to Configuration » Content authoring » Text formats and editors.
- Edit your preferred format (e.g., Full HTML).
- Drag the Columns icon into the active toolbar.
- Enable the CKEditor 5 Column Layout Asset Loader & Cleaner filter.
Note: This filter should be ordered after "Limit allowed HTML tags". - In the Permissions page, grant the "ck5 column layout settings" permission to the appropriate roles.
Additional Requirements
This module requires the CKEditor 5 module (included in Drupal Core 10 and 11). No external JavaScript libraries are required as the widget is built natively for the CKEditor 5 framework.
Similar projects
- CKEditor Layouts
- Ckeditor Layout Manager
- CKEditor Templates
- Ckeditor templates user interface
- CKEditor5 Template
Supporting this Module
If you find this module useful, please consider reporting bugs or submitting feature requests in the issue queue. Your feedback helps make this tool better for the entire community!
Depends on
Dependencies of the latest stable release
- ckeditor5 Drupal core
Required by
Tracked projects that depend on this one
No tracked projects depend on this one yet.