Toast Image Editor is a Drupal module by DXPR that brings professional image editing capabilities into Drupal's media library using Toast UI Image Editor, supporting crop, rotate, draw, filter, and text overlay. By DXPR.
Professional image editing capabilities for Drupal media with revision support and offline compatibility.
- Full Image Editor: Crop, rotate, flip, draw, add text and shapes
- Revision Support: Creates new media revisions preserving original images
- Theme Selection: White and black theme options for different workflows
- Configurable Tools: Enable/disable specific editing tools per requirements
- Offline-ready: All assets served locally, no CDN dependencies
- Responsive Interface: Configurable editor dimensions
- Filters & Effects: Apply filters, adjust brightness, contrast, and more
- Undo/Redo Support: Full editing history with keyboard shortcuts
- Drupal 10.3+ or 11.0+
- Media module (core)
- File module (core)
- PHP 8.1+
composer require drupal/toast_image_editor
drush en toast_image_editor- Configure editor settings at
/admin/config/media/toast-image-editor - Set permissions at
/admin/people/permissions#module-toast_image_editor - Select which tools to enable (crop, draw, text, filters, etc.)
- Choose theme (white or black)
- Configure editor dimensions
- Navigate to Media library (
/admin/content/media) - Select an image media item
- Click "Edit with Toast Editor" button
- Use the editing tools to modify the image
- Click "Save" to create a new revision
- The module automatically adds an edit action to image media types
- Configure which roles can edit images via permissions
- Customize editor toolbar through configuration
- Free drawing with customizable brush size and color
- Straight line drawing
- Text overlay with font customization
- Shapes (rectangle, circle, triangle)
- Crop with aspect ratio options
- Rotate (90°, -90°, custom angles)
- Flip horizontal/vertical
- Resize
- Grayscale, sepia, blur, sharpen
- Brightness and contrast adjustment
- Color filters
- Custom filter combinations
The module provides granular permissions:
- Access Toast Image Editor
- Edit images with Toast Image Editor
- Configure Toast Image Editor settings
- All JavaScript and CSS assets served locally
- No external CDN dependencies
- Automatic asset copying during installation
- Versioned assets for cache management
- Creates new media revisions on save
- Preserves original image files
- Maintains revision history
- Rollback capability through Media revisions
- tui-image-editor: ^3.15.3
- fabric: ^4.4.0 (canvas manipulation)
- file-saver: ^1.3.8 (download functionality)
- tui-code-snippet: ^1.5.2
- tui-color-picker: ^2.2.7
Run code quality checks using Docker:
# Check code standards
docker compose run --rm drupal-lint
# Auto-fix code standards
docker compose run --rm drupal-lint-auto-fix
# Check for deprecations
docker compose run --rm drupal-checkEditor not loading:
- Ensure
npm installwas run successfully - Check browser console for JavaScript errors
- Verify assets exist in
assets/directory - Clear Drupal and browser caches
Permission denied errors:
- Verify user has "Edit images with Toast Image Editor" permission
- Check media entity access permissions
- Ensure file system permissions allow media creation
- Image Widget Crop - Crop-only functionality
- Focal Point - Smart image cropping
- ImageMagick - Server-side image processing
- Media - Required core module; the editor attaches to media edit forms and creates media revisions on save
- File - Required core module used for file entity storage, URI handling, and file system writes
- Image - Core module used to flush image style derivatives when an edited image is saved
- AI Image Alt Text - Generate accessible alt text with AI after editing images