--- title: "Introduction" manual: "RTE CKEditor Image" version: "main" permalink: "https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:introduction@main" source: "Introduction/Index.rst" rendered: "2026-10-01T01:27:51+00:00" --- # Introduction {#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 {#key-features} **CKEditor 5 Integration** Native CKEditor 5 plugin with full toolbar integration and TYPO3 file browser support. [Plugin Development](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-plugin-development@main) **TYPO3 FAL Support** Full File Abstraction Layer integration with file references, metadata, and browser. [RTE Setup](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:integration-configuration-rte-setup@main) **Image Processing** Magic images, cropping, scaling with configurable quality multipliers (1x-6x). [Configuration](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:integration-configuration-image-processing@main) **Custom Styles** Define custom image styles (borders, shadows, alignment) via YAML configuration. [Image Styles](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:examples-image-styles@main) **Responsive Images** Automatic srcset generation and picture element support for responsive layouts. [Responsive Examples](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:examples-responsive-images@main) **Performance** Native lazy loading, intersection observer fallback, and optimized rendering. [Advanced Features](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:examples-advanced-features@main) **Event Architecture** PSR-14 event dispatching for custom image processing and rendering hooks. [Event Listeners](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:api-eventlisteners@main) **Security** Protocol blocking, XSS prevention, file validation, and FAL-based access control. [Security Guide](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:integration-security@main) **Quality Multipliers** Retina (2x), Ultra (3x), and Print (6x) quality settings for high-DPI displays. [Quality Settings](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:integration-configuration-quality@main) **noScale Mode** Skip image processing entirely for pre-optimized images (SVG, WebP, optimized PNG). [Image Processing](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:integration-configuration-image-processing@main) **Service Architecture** Modern Parser → Resolver → Renderer pipeline with dependency injection. [Services API](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:api-services@main) **Fluid Templates** Customizable output via template overrides for complete rendering control. [Template Overrides](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:examples-template-overrides@main) **Linked Images** Full link support with TYPO3 link browser integration, target options, and URL parameters. [Linked Images](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:examples-linked-images@main) **Figure & Caption Support** Native `
`/`
` output. Add captions directly in the image dialog -- no custom content elements needed. [Advanced Features](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:examples-advanced-features@main) **Caption Width Constraint** Figcaptions automatically constrained to image width via `max-width` on `
`. [Image Styles](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:examples-image-styles@main) **Image Validation** CLI command and upgrade wizard to detect and fix broken image references and nested links. [Validation](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:troubleshooting-image-reference-validation@main) **TYPO3 v14 & PHP 8.5** Full compatibility with TYPO3 v14 and tested with PHP 8.5. [Requirements](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:requirements@main) > **Why does this extension exist?** > > TYPO3 **intentionally removed** RTE image handling in v10.0, recommending structured > content (FAL relations) instead. This extension provides inline image support for > projects that need it -- legacy migrations, editorial workflows, or content tightly > coupled to surrounding text. > > [Read the full background and decision guide](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:core-removal@main) ## Visual Preview {#visual-preview} ![Rich Text Editor with image support in TYPO3 backend](../Images/backend-rte-editor.png) ![RTE CKEditor Image extension demo](../Images/demo.gif) ## Version Information {#version-information} - *Supported TYPO3:* 13.4.21+ LTS, 14.3+ LTS - *License:* AGPL-3.0-or-later - *Repository:* [github.com/netresearch/t3x-rte_ckeditor_image](https://github.com/netresearch/t3x-rte_ckeditor_image) - *Maintainer:* [Netresearch DTT GmbH](https://www.netresearch.de/) # Requirements {#requirements} ## System Requirements {#system-requirements} - **TYPO3:** 13.4.21+ LTS or 14.3+ LTS - **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 {#quick-start} ## Installation {#installation} Install via Composer: ```bash composer require netresearch/rte-ckeditor-image ``` ![Extension Manager showing RTE CKEditor Image extension installed](../Images/backend-extensions-list.png) The RTE preset and frontend TypoScript are now provided via Site Set only. You must enable the Site Set in your site configuration. **Step 1: Enable Site Set (Required)** Add the extension to your site dependencies: **config/sites/\/config.yaml** ```yaml dependencies: - netresearch/rte-ckeditor-image ``` This enables: - ✅ **Backend RTE**: Registers the `rteWithImages` preset with `insertimage` button - ✅ **Frontend rendering**: Includes TypoScript for image processing **Step 2: Clear Caches** ```bash vendor/bin/typo3 cache:flush ``` > [!TIP] > **Default image maxWidth** > > The extension's Site Set configures `maxWidth = 1920` for magic images. If you > have **not** enabled the Site Set (e.g., when using sys_template records), TYPO3's > built-in default of **300px** applies, which causes images to appear unexpectedly small. > > In that case, add this to your Page TSConfig: > > ```typoscript > RTE.default.buttons.image.options.magic { > maxWidth = 1920 > maxHeight = 9999 > } > ``` > > See [Page TSConfig Setup](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:integration-configuration-tsconfig@main) for full details. > [!NOTE] > **Using Bootstrap Package or other theme extensions?** > > If your site uses `bootstrap_package` or another theme extension with Site Sets, > list this extension **after** them in your dependencies to override their RTE preset. > See [Installation Issues](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:troubleshooting-installation-issues@main) for details. ![CKEditor toolbar with image insert button highlighted](../Images/backend-rte-with-image-button.png) ## Custom Configuration (Optional) {#custom-configuration-optional} If you need to customize the RTE configuration or create your own preset, see the [RTE Setup Guide](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:integration-configuration-rte-setup@main) 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](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:core-removal@main) > to understand why TYPO3 intentionally removed this functionality and whether this extension > is the right choice for your project.