Introduction

The RTE CKEditor Image extension provides comprehensive image handling capabilities for TYPO3's CKEditor Rich Text Editor. This extension enables editors to insert, configure, and style images directly within the CKEditor interface, with full integration into TYPO3's File Abstraction Layer (FAL).

Key Features

CKEditor 5 Integration

Native CKEditor 5 plugin with full toolbar integration and TYPO3 file browser support.

Plugin Development

TYPO3 FAL Support

Full File Abstraction Layer integration with file references, metadata, and browser.

RTE Setup

Image Processing

Magic images, cropping, scaling with configurable quality multipliers (1x-6x).

Configuration

Custom Styles

Define custom image styles (borders, shadows, alignment) via YAML configuration.

Image Styles

Responsive Images

Automatic srcset generation and picture element support for responsive layouts.

Responsive Examples

Performance

Native lazy loading, intersection observer fallback, and optimized rendering.

Advanced Features

Event Architecture

PSR-14 event dispatching for custom image processing and rendering hooks.

Event Listeners

Security

Protocol blocking, XSS prevention, file validation, and FAL-based access control.

Security Guide

Quality Multipliers

New in version 13.1.5

Retina (2x), Ultra (3x), and Print (6x) quality settings for high-DPI displays.

Quality Settings

noScale Mode

New in version 13.1.5

Skip image processing entirely for pre-optimized images (SVG, WebP, optimized PNG).

Image Processing

Service Architecture

New in version 13.1.5

Modern Parser → Resolver → Renderer pipeline with dependency injection.

Services API

Fluid Templates

New in version 13.1.5

Customizable output via template overrides for complete rendering control.

Template Overrides

TYPO3 v14 & PHP 8.5

New in version 13.2.0

Full compatibility with TYPO3 v14 and tested with PHP 8.5.

Requirements

Visual Preview

Rich Text Editor with image support in TYPO3 backend — The RTE with image support enabled, showing an inserted image with styling options

RTE CKEditor Image extension demo — Image insertion and configuration workflow in CKEditor with TYPO3 file browser integration

Version Information

Supported TYPO3: 13.4.21+ LTS, 14.0+
License: AGPL-3.0-or-later
Repository: github.com/netresearch/t3x-rte_ckeditor_image
Maintainer: Netresearch DTT GmbH

Requirements

System Requirements

TYPO3: 13.4.21+ LTS 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.

Quick Start

Installation

Install via Composer:

composer require netresearch/rte-ckeditor-image

Extension Manager showing RTE CKEditor Image extension installed — The extension appears in the TYPO3 Extension Manager after installation

The backend RTE works immediately after installation:

✅ Backend RTE: Automatically registers the rteWithImages preset and configures the toolbar with insertimage button

Important

v13.4.0+: TypoScript is no longer auto-injected. You must include it manually.

For frontend rendering, include the TypoScript:

Go to WEB > Template module
Select your root page, edit the template
In Includes tab, add: CKEditor Image Support (rte_ckeditor_image)

Or add to your site package: @import 'EXT:rte_ckeditor_image/Configuration/TypoScript/ImageRendering/setup.typoscript'

Note

Using Bootstrap Package or other theme extensions?

If your site uses bootstrap_package or another theme extension with Site Sets, you may need to add this extension to your site dependencies. See Installation Issues for the one-line fix.

CKEditor toolbar with image insert button highlighted — The `insertimage` button in the CKEditor toolbar opens the TYPO3 file browser for image selection

Custom Configuration (Optional)

If you need to customize the RTE configuration or create your own preset, see the RTE Setup Guide for detailed instructions.

The extension provides a default preset that you can extend or override as needed.

Important

Before using this extension, please read TYPO3 Core Removal & Design Decision to understand why TYPO3 intentionally removed this functionality and whether this extension is the right choice for your project.