https://github.com/netresearch/t3x-rte_ckeditor_image
Image support in CKEditor for the TYPO3 ecosystem - by Netresearch
https://github.com/netresearch/t3x-rte_ckeditor_image
ckeditor ckeditor-plugin magic-images rte-ckeditor typo3 typo3-extension typo3cms-extension
Last synced: 3 months ago
JSON representation
Image support in CKEditor for the TYPO3 ecosystem - by Netresearch
- Host: GitHub
- URL: https://github.com/netresearch/t3x-rte_ckeditor_image
- Owner: netresearch
- License: agpl-3.0
- Created: 2017-05-12T13:29:43.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2026-03-31T17:26:25.000Z (3 months ago)
- Last Synced: 2026-03-31T18:24:03.553Z (3 months ago)
- Topics: ckeditor, ckeditor-plugin, magic-images, rte-ckeditor, typo3, typo3-extension, typo3cms-extension
- Language: PHP
- Homepage:
- Size: 5.99 MB
- Stars: 61
- Watchers: 8
- Forks: 67
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
[](https://github.com/netresearch/t3x-rte_ckeditor_image/releases/latest)
[](https://github.com/netresearch/t3x-rte_ckeditor_image/blob/main/LICENSE)
[](https://github.com/netresearch/t3x-rte_ckeditor_image/actions/workflows/ci.yml)
[](https://github.com/netresearch/t3x-rte_ckeditor_image/actions/workflows/codeql.yml)
[](https://securityscorecards.dev/viewer/?uri=github.com/netresearch/t3x-rte_ckeditor_image)
[](https://www.bestpractices.dev/projects/11718)
[](https://www.bestpractices.dev/en/projects/11718#openssf_security_baseline)
[](https://phpstan.org/)
[](CODE_OF_CONDUCT.md)
[](https://codecov.io/gh/netresearch/t3x-rte_ckeditor_image)
[](https://github.com/netresearch/t3x-rte_ckeditor_image/attestations)
[](https://docs.typo3.org/p/netresearch/rte-ckeditor-image/main/en-us/)
[](https://packagist.org/packages/netresearch/rte-ckeditor-image)
[](https://extensions.typo3.org/extension/rte_ckeditor_image)
[](https://extensions.typo3.org/extension/rte_ckeditor_image)
[](https://extensions.typo3.org/extension/rte_ckeditor_image)
[](https://extensions.typo3.org/extension/rte_ckeditor_image)
[](https://extensions.typo3.org/extension/rte_ckeditor_image)
# Image support for CKEditor for TYPO3
This extension adds comprehensive image handling capabilities to CKEditor for TYPO3.\
Add issues or explore the project on [GitHub](https://github.com/netresearch/t3x-rte_ckeditor_image).
## Features
- **TYPO3 FAL Integration**: Native file browser with full File Abstraction Layer support
- **Magic Images**: Same image processing as rtehtmlarea (cropping, scaling, TSConfig supported)
- **Image Dialog**: Configure width, height, alt, and title (aspect ratio automatically maintained)
- **Quality Selector**: Quality multipliers for optimal display (Standard 1.0x, Retina 2.0x, Ultra 3.0x, Print 6.0x)
- **SVG Support**: Intelligent dimension extraction from viewBox and width/height attributes
- **Custom Styles**: Configurable image styles with CKEditor 5 style system
- **Inline Images**: True inline image support with cursor positioning before/after
- **Lazy Loading**: TYPO3 native browser lazyload support
- **Event-Driven**: PSR-14 events for extensibility
- **Security**: Protocol blocking, XSS prevention, file visibility validation
- **Fluid Templates**: Customizable output via template overrides with automatic figcaption width constraint
- **Image Validation**: CLI command and upgrade wizard to detect and fix broken image references and nested link wrappers
- **Preview Renderer**: Images preserved in page module preview with broken reference warnings
- **Content Blocks Support**: ViewHelper for rendering RTE image previews in Content Blocks backend templates
- **Table Images**: Images in CKEditor 5 tables get full processing (max-width, zoom, t3:// resolution)
- **Automatic Softref**: RTE image references tracked automatically across all tables
## Requirements
- **TYPO3:** 13.4.21+ or 14.0+
- **PHP:** 8.2 or later
- **Extensions:** cms-rte-ckeditor (included in TYPO3 core)
> **Note:** The plugin automatically integrates with CKEditor's `GeneralHtmlSupport` for style functionality. No additional configuration required.
## Installation
### Quick Start
Install the extension via composer:
```shell
composer req netresearch/rte-ckeditor-image
```
Enable the Site Set to activate both the backend RTE preset and frontend rendering:
Add the extension to your site dependencies:
```yaml
# config/sites//config.yaml
dependencies:
- netresearch/rte-ckeditor-image
```
This enables the RTE preset with the `insertimage` button and includes the frontend TypoScript for image processing.
> **Using Bootstrap Package or another theme extension?** List this extension **after** them in your dependencies to override their RTE preset.
**Alternative: Direct TypoScript Import**
If you prefer manual control over TypoScript load order:
```typoscript
@import 'EXT:rte_ckeditor_image/Configuration/TypoScript/ImageRendering/setup.typoscript'
```
### Custom Configuration (Optional)
If you need to customize the RTE configuration or create your own preset:
1. Create a custom preset in your site extension:
```php
```
### Verify SLSA provenance
```bash
# Verify provenance of a release asset (when assets are attached)
gh attestation verify \
--repo netresearch/t3x-rte_ckeditor_image
```
## About
Developed and maintained by [Netresearch DTT GmbH](https://www.netresearch.de/).