ck5_column_layout

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_layout

Enable the module using Drush:

drush en ck5_column_layout

Post-Installation

After installation, you must configure your Text Formats to make the column tools available:

1. Go to Configuration » Content authoring » Text formats and editors.
2. Edit your preferred format (e.g., Full HTML).
3. Drag the Columns icon into the active toolbar.
4. Enable the CKEditor 5 Column Layout Asset Loader & Cleaner filter.
   Note: This filter should be ordered after "Limit allowed HTML tags".
5. 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!