CKEditor Plugin Development
Complete documentation for the CKEditor 5 plugin implementation.
The typo3image plugin is a custom CKEditor 5 plugin that integrates TYPO3's File Abstraction Layer (FAL) with the rich text editor, enabling seamless image management within the CKEditor interface.
Plugin Components
🔌 Plugin Development
Plugin architecture, UI components, commands, and event handling
📐 Model Element
The typo3image custom element schema, attributes, and model integration
🎨 Style Integration
Style system integration with StyleUtils and GeneralHtmlSupport (critical for v13.0.0+)
↔️ Conversions
HTML ↔ Model conversion patterns for upcast and downcast transformations
🎚️ Image Quality Selector
Quality multipliers, SVG support, and dimension handling
Quick Links
Getting Started
- Read CKEditor Plugin Development for overall structure
- Understand CKEditor Model Element Reference for data handling
- Study CKEditor Conversion System for HTML transformation
Common Tasks
- Add custom attributes → See CKEditor Model Element Reference
- Implement custom styles → See CKEditor Style Integration
- Debug conversion issues → See CKEditor Conversion System
- Extend plugin features → See CKEditor Plugin Development
Critical Information
Version 13.0.0+ Requirements
The plugin requires these CKEditor dependencies:
static get requires() {
return ['StyleUtils', 'GeneralHtmlSupport'];
}Warning
Missing either dependency will disable style functionality. See CKEditor Style Integration for details.