ck5_csv_to_table
1 sites
No security coverage
Transform CSV files into editable HTML tables instantly within CKEditor 5. This module adds a dedicated toolbar button that allows content editors to upload CSV files and automatically generate clean, fully editable tables without touching any HTML code. Perfect for managing data-heavy content like pricing tables, reports, comparisons, and schedules. Handles large files up to 50MB with enterprise-grade security including XSS protection and CSV injection prevention.
Features
The CKEditor 5 CSV to Table module provides a smooth solution for importing structured data into your Drupal content. Instead of manually creating tables cell-by-cell or writing HTML, content editors can upload a CSV file and instantly generate a formatted table that remains fully editable.
Core Functionality
- One-Click CSV Import: Dedicated toolbar button with CSV icon appears in the CKEditor 5 toolbar. Click it, select your CSV file, and watch the table appear instantly.
- Fully Editable Output: Generated tables are standard CKEditor tables that can be edited, styled, and modified using all native CKEditor table tools after insertion.
- Smart File Processing: Handles CSV files up to 50MB with advanced chunked processing that keeps your browser responsive even with thousands of rows.
- Real-Time Progress Tracking: Visual progress bar (0-100%) displays during import, showing exactly how much of your file has been processed.
- First Row as Header: Automatically converts the first row of your CSV into table headers with proper HTML table heading markup.
- Permission-Based Access: Only users with the "Use CSV Importer" permission can see and use the import button, giving you full control over who can upload files.
Enterprise Security Features
- XSS Protection: Multi-layer filtering removes script tags, iframes, objects, embeds, event handlers, and dangerous protocols (javascript:, data:, vbscript:).
- CSV Injection Prevention: Scans and blocks malicious formulas, executable content, and suspicious patterns before they reach your database.
- Content Sanitization: All cell content is sanitized to remove HTML tags, escape sequences, null bytes, and obfuscation techniques.
- File Validation: Validates both MIME types and file extensions to ensure only legitimate CSV files are processed.
- DoS Protection: Enforces safety limits (6,000 rows, 100 columns, 10,000 characters per cell) with user confirmation before processing oversized files.
- User Control: When files exceed limits, users receive a clear dialog explaining what will be imported and can choose to proceed or cancel.
Performance Optimizations
- Chunked Parsing: Processes 500 CSV rows at a time to prevent browser freezing on large datasets.
- Chunked Insertion: Inserts 25 table rows per batch into CKEditor's model for optimal performance.
- Async Processing: Uses setTimeout and requestAnimationFrame to maintain browser responsiveness throughout the import.
- Throttled Updates: Progress bar updates every 100-150ms instead of every chunk to reduce DOM manipulation overhead.
- Memory Efficient: Optimized string processing and garbage collection-friendly code prevents memory issues.
When to Use This Module
This module excels in scenarios where you need to manage structured tabular data efficiently:
- Data-Heavy Content: Articles, blog posts, and documentation containing comparison tables, statistics, research data, or technical specifications.
- Frequently Updated Tables: Pricing tables, financial reports, event schedules, sports scoreboards, inventory lists, or any content that changes regularly.
- Spreadsheet Integration: When your team maintains data in Excel, Google Sheets, or other spreadsheet tools and needs to publish it to Drupal.
- E-commerce Sites: Product comparison tables, feature matrices, pricing grids, and specification sheets that need frequent updates.
- Non-Technical Editors: Enabling content editors who aren't comfortable with HTML to manage complex tables accurately and efficiently.
- Data Migration: Importing existing tabular data from legacy systems or external databases into Drupal content.
- Reports and Analytics: Publishing business reports, quarterly reviews, KPI dashboards, and analytics summaries directly from your data tools.
What Makes This Module Unique
- Security First: Unlike simple CSV importers, this module includes comprehensive security measures to protect against XSS, CSV injection, and other attack vectors.
- Large File Support: Handles files up to 50MB with up to 6,000 rows without freezing the browser, far exceeding typical CSV import capabilities.
- User Experience: Progress bar, user confirmations, and clear error messages make the import process transparent and user-friendly.
- CKEditor 5 Native: Built specifically for CKEditor 5 using its plugin architecture, not a hack or workaround.
- No External Dependencies: Pure JavaScript implementation with no external libraries required beyond CKEditor 5 itself.
Installation
Install via Composer (recommended):
composer require drupal/ck5_csv_to_tableEnable the module:
drush en ck5_csv_to_table -y drush cr
Or enable through the Drupal admin interface at Extend (admin/modules).
Post-Installation
After installing and enabling the module, follow these steps to configure it for your content editors:
Step 1: Configure Your Text Format
- Navigate to Configuration » Content authoring » Text formats and editors (admin/config/content/formats)
- Click Configure next to the text format you want to enable CSV import for (typically "Full HTML" or "Basic HTML")
- In the Toolbar configuration section, you'll see the available buttons on the left and the active toolbar on the right
- Find the CSV Importer button (it has a CSV icon with a download arrow) in the available buttons
- Drag and drop the CSV Importer button into your active toolbar where you want it to appear
- Scroll down and verify that the Allowed HTML tags section includes table-related tags:
<table>,<tbody>,<thead>,<tr>,<th>,<td> - Click Save configuration
Step 2: Set Permissions
- Navigate to People » Permissions (admin/people/permissions)
- Scroll down or use your browser's find function to locate "Use CSV Importer" under the CKEditor 5 CSV to Table section
- Check the box for each role that should have access to the CSV import feature (recommended: Content Editor, Site Administrator)
- For security, do NOT grant this permission to anonymous users or untrusted roles
- Click Save permissions
Step 3: Clear Cache
- Navigate to Configuration » Development » Performance (admin/config/development/performance)
- Click Clear all caches
- Or use Drush:
drush cr
Using the CSV Importer
Once configured, content editors can use the CSV importer as follows:
- Create or edit any content that uses the configured text format
- In the CKEditor 5 editor, click the CSV Importer button in the toolbar
- A file picker dialog will open
- Select a CSV file from your computer (must be .csv extension, under 50MB)
- A progress bar appears showing the import progress from 0% to 100%
- If the file exceeds 6,000 rows or 100 columns, a confirmation dialog appears asking if you want to proceed with only the first 6,000 rows/100 columns
- Once complete, the table appears in the editor at your cursor position
- The table can now be edited, styled, and modified using all standard CKEditor table tools
Special Considerations
- CSV Format: Your CSV should use commas as delimiters. The module supports quoted fields (fields containing commas must be wrapped in double quotes).
- Header Row: The first row of your CSV will automatically become the table header with tags.
- Large Files: Files with more than 6,000 rows or 100 columns will trigger a confirmation dialog. You can cancel and prepare a smaller file if needed.
- Browser Compatibility: Works best in modern browsers (Chrome, Firefox, Edge, Safari). Very old browsers may experience performance issues with large files.
- File Security: The module includes comprehensive security scanning, but always verify that CSV files come from trusted sources.
- Drupal Core: Version 10.0 or higher (designed for Drupal 10 and Drupal 11)
- CKEditor 5: Included in Drupal 10+ core by default
- PHP: Version 8.1 or higher (matches Drupal 10 requirements)
- No contributed modules required
- No external JavaScript libraries needed
- No API keys or external services required
- No additional PHP libraries required via Composer (beyond Drupal core)
- Chrome 90+
- Firefox 88+
- Edge 90+
- Safari 14+
- CKEditor 5 Premium Features: If you have access to CKEditor 5 Premium Features, you can combine CSV import with advanced table styling options.
- Views Data Export: If you need to export Drupal Views data to CSV format, this module can help you create CSV files that can then be re-imported using this module.
- Admin Toolbar: Makes navigating to configuration pages (text formats, permissions) much faster during setup.
- Field Permissions: For fine-grained control over which content editors can use specific text formats.
- Devel: Useful for development and debugging
- PHPUnit: Already included in Drupal core for running the module's test suite
- Submit patches and improvements via the Drupal.org issue queue
- Write additional tests to improve code coverage
- Help review and test patches from other contributors
- Translate the module into other languages
- File bug reports with clear steps to reproduce
- Suggest new features and enhancements
- Provide feedback on usability and performance
- Share your use cases to help guide development priorities
- Star the project on Drupal.org
- Write blog posts or create video tutorials about using the module
- Share your success stories in the issue queue or on social media
- Recommend the module to others who might benefit from it
- Verify module is enabled
- Check toolbar configuration includes CSV Importer button
- Verify user has "Use CSV Importer" permission
- Clear Drupal cache
- Ensure file is under 50MB
- For very large files (6,000+ rows), consider splitting into smaller files
- Use a modern browser (Chrome, Firefox, Edge)
- Verify text format allows table HTML tags
- Check browser console for JavaScript errors
- Ensure CSV has consistent column counts across all rows
Additional Requirements
This module has minimal requirements and works out of the box with a standard Drupal installation:
Required
No External Dependencies
Browser Requirements
For optimal performance with large CSV files, recommend:
Recommended modules/libraries
While this module works independently, the following can enhance your content editing experience:
Complementary Modules
Development and Testing
Similar projects
Supporting this Module
This module is open source and free to use. If you find it valuable for your projects, there are several ways you can support its continued development:
Contribute Code
Report Issues and Suggest Features
Spread the Word
Professional Support
For custom development, enterprise support, or feature sponsorship, you can contact the maintainers directly through their Drupal.org profiles.