PHPackages netresearch/rte-ckeditor-image - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Image & Media](/categories/media) 4. / 5. netresearch/rte-ckeditor-image ActiveTypo3-cms-extension[Image & Media](/categories/media) netresearch/rte-ckeditor-image ============================== Image support in CKEditor for the TYPO3 ecosystem - by Netresearch v13.10.1(2w ago)611.1M↓40%67[3 issues](https://github.com/netresearch/t3x-rte_ckeditor_image/issues)4AGPL-3.0-or-laterPHPPHP ^8.2CI passing Since May 17Pushed 1w ago8 watchersCompare [ Source](https://github.com/netresearch/t3x-rte_ckeditor_image)[ Packagist](https://packagist.org/packages/netresearch/rte-ckeditor-image)[ Docs](https://github.com/netresearch/t3x-rte_ckeditor_image)[ RSS](/packages/netresearch-rte-ckeditor-image/feed)WikiDiscussions main Synced 3d ago READMEChangelog (10)Dependencies (44)Versions (118)Used By (4) [![Latest GitHub release](https://camo.githubusercontent.com/03f983684a7d6d95b780fbfa2b5b989ef0ca37760c7c9e05fea2a4a66782ff5a/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f6e657472657365617263682f7433782d7274655f636b656469746f725f696d6167653f736f72743d73656d766572266c6f676f3d676974687562)](https://github.com/netresearch/t3x-rte_ckeditor_image/releases/latest)[![License](https://camo.githubusercontent.com/22a238592bc3993ab62a4972f255538e37b8c4c55d990d9fcca084b75c230abb/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6e657472657365617263682f7433782d7274655f636b656469746f725f696d616765)](https://github.com/netresearch/t3x-rte_ckeditor_image/blob/main/LICENSE)[![CI](https://github.com/netresearch/t3x-rte_ckeditor_image/actions/workflows/ci.yml/badge.svg)](https://github.com/netresearch/t3x-rte_ckeditor_image/actions/workflows/ci.yml)[![CodeQL](https://github.com/netresearch/t3x-rte_ckeditor_image/actions/workflows/codeql.yml/badge.svg)](https://github.com/netresearch/t3x-rte_ckeditor_image/actions/workflows/codeql.yml)[![OpenSSF Scorecard](https://camo.githubusercontent.com/394aa62549028ef948d6485e2fc60d0af1b85cb200f584b03e57111e8b949ea0/68747470733a2f2f696d672e736869656c64732e696f2f6f7373662d73636f7265636172642f6769746875622e636f6d2f6e657472657365617263682f7433782d7274655f636b656469746f725f696d6167653f6c6162656c3d6f70656e7373662b73636f726563617264267374796c653d666c6174)](https://securityscorecards.dev/viewer/?uri=github.com/netresearch/t3x-rte_ckeditor_image)[![OpenSSF Best Practices](https://camo.githubusercontent.com/4621735fd2df51d7e95e09e103eb7e583dc2352a1282cc9654aba33cfa45a008/68747470733a2f2f7777772e626573747072616374696365732e6465762f70726f6a656374732f31313731382f6261646765)](https://www.bestpractices.dev/projects/11718)[![OpenSSF Baseline](https://camo.githubusercontent.com/f3ea270a97a44a036a297d0dd5fb7ed495019e50f68b40392231468b90e48ccf/68747470733a2f2f7777772e626573747072616374696365732e6465762f70726f6a656374732f31313731382f626173656c696e65)](https://www.bestpractices.dev/en/projects/11718#openssf_security_baseline)[![PHPStan](https://camo.githubusercontent.com/91d36ab35da3f7a5e417160542ff27b7ccb8473962fb0ffa592c86d58d40f530/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048505374616e2d6c6576656c25323031302d627269676874677265656e2e7376673f6c6f676f3d706870)](https://phpstan.org/)[![Contributor Covenant](https://camo.githubusercontent.com/817d29b29dcac8a671e6670fb01f792302989c853922a3714322e78af3dc7c85/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f436f6e7472696275746f72253230436f76656e616e742d332e302d3462616161612e737667)](CODE_OF_CONDUCT.md)[![codecov](https://camo.githubusercontent.com/d3a3b988c02a1e400bf533a2ee9017aca50aaad960d68d1ca242c50bd374d714/68747470733a2f2f636f6465636f762e696f2f67682f6e657472657365617263682f7433782d7274655f636b656469746f725f696d6167652f67726170682f62616467652e737667)](https://codecov.io/gh/netresearch/t3x-rte_ckeditor_image)[![SLSA 3](https://camo.githubusercontent.com/dc294f15fb5f1c96307863a1e96860310be940504e7ee370cee94bf4400cbac9/68747470733a2f2f736c73612e6465762f696d616765732f67682d62616467652d6c6576656c332e737667)](https://github.com/netresearch/t3x-rte_ckeditor_image/attestations)[![Documentation](https://camo.githubusercontent.com/21a23d09a70d297c4c32ff7e6dd9fa8693123253f345d3d307b9fd93a094f3eb/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646f63732d646f63732e7479706f332e6f72672d6f72616e67652e7376673f6c6f676f3d7479706f33)](https://docs.typo3.org/p/netresearch/rte-ckeditor-image/main/en-us/) [![Composer](https://camo.githubusercontent.com/db14ff22dab2363125cc84608f21d22ccdde7ce72ff6773a2933bd496c34a437/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f7274655f636b656469746f725f696d6167652f636f6d706f7365722f736869656c64732e737667)](https://packagist.org/packages/netresearch/rte-ckeditor-image)[![Total downloads](https://camo.githubusercontent.com/bca09830d20e1166812dbc4bccb44e1d866176bcbd76c3870ae7096e5d8bb331/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f7274655f636b656469746f725f696d6167652f646f776e6c6f6164732f736869656c64732e737667)](https://extensions.typo3.org/extension/rte_ckeditor_image)[![TYPO3 extension](https://camo.githubusercontent.com/53fe6b6a047594bcf075aa2a55db5faa98b4a8850e722fa9090a2779229c162a/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f7274655f636b656469746f725f696d6167652f657874656e73696f6e2f736869656c64732e737667)](https://extensions.typo3.org/extension/rte_ckeditor_image)[![Stability](https://camo.githubusercontent.com/10e23a8abbe09f2e8e5ecd7ecc1a7e3b832b897fa0a210d78fbddeb6608620e8/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f7274655f636b656469746f725f696d6167652f73746162696c6974792f736869656c64732e737667)](https://extensions.typo3.org/extension/rte_ckeditor_image)[![TYPO3 versions](https://camo.githubusercontent.com/e21616fa6193a7348706601e5076f3dc3cf25f8f25a46974b71b8fd559975ce3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5459504f332d313325323025374325323031342d6f72616e67652e7376673f6c6f676f3d7479706f33)](https://extensions.typo3.org/extension/rte_ckeditor_image)[![Latest TER version](https://camo.githubusercontent.com/f7d4e034e501a1716b1cf91b8ff8cb7215b93c7139d661396b1163cd89bc59a7/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f7274655f636b656469746f725f696d6167652f76657273696f6e2f736869656c64732e737667)](https://extensions.typo3.org/extension/rte_ckeditor_image) RTE CKEditor Image — Image Support for CKEditor 5 in TYPO3 ========================================================== [](#rte-ckeditor-image--image-support-for-ckeditor-5-in-typo3) > A TYPO3 extension that restores and modernises rich-text image handling for **TYPO3 v13.4 LTS** and **v14.3 LTS**, built on **CKEditor 5** with full **File Abstraction Layer (FAL)** integration, image processing, accessibility metadata, and content security in mind. [![Screenshot of the TYPO3 backend image properties dialog provided by the rte_ckeditor_image extension, showing FAL-backed image selection with width, height, alternative text, title, and quality controls](Documentation/Images/backend-image-properties-dialog.png?raw=true)](Documentation/Images/backend-image-properties-dialog.png?raw=true) --- Table of Contents ----------------- [](#table-of-contents) - [Why this extension exists](#why-this-extension-exists) - [Features at a glance](#features-at-a-glance) - [Requirements](#requirements) - [Installation](#installation) - [Configuration](#configuration) - [Usage recipes](#usage-recipes) - [Documentation](#documentation) - [Security](#security) - [Development](#development) - [Verifying releases](#verifying-releases) - [Contributing](#contributing) - [License & credits](#license--credits) --- Why this extension exists ------------------------- [](#why-this-extension-exists) TYPO3 intentionally [removed rich-text image handling from the core in TYPO3 v10](https://docs.typo3.org/p/netresearch/rte-ckeditor-image/main/en-us/Introduction/CoreRemoval.html). Editors lost the ability to insert FAL-backed images into bodytext via the rich-text editor — the recommended path became dedicated image content elements, which is not always what an editorial workflow needs. This extension fills that gap **without recreating the legacy `rtehtmlarea` behaviour wholesale**. Images inserted from the rich-text editor go through the same **Magic Images** processing pipeline integrators already know from TSConfig: cropping, scaling, quality multipliers, lazy-loading, captions, and inline links. The CKEditor 5 plugin handles upcast/downcast cleanly, the backend uses TYPO3's modern file browser, and the rendered frontend output passes through TYPO3's parseFunc / Fluid template chain so site themes (Bootstrap Package, custom sitepackages, Content Blocks) can override it. If your editorial workflow needs **inline images inside paragraphs** — with alt text, captions, links, popups, alignment, and high-DPI rendering — and you do not want to give up FAL or content security, this is the extension for you. --- Features at a glance -------------------- [](#features-at-a-glance) ### Editor experience [](#editor-experience) - **TYPO3 FAL integration** — native file browser with full File Abstraction Layer support and the standard CKEditor 5 dialog. - **Image properties dialog** — width, height, alt, title, with automatic aspect-ratio locking. - **Quality selector** — choose **No Scaling**, **Standard (1.0x)**, **Retina (2.0x)**, **Ultra (3.0x)**, or **Print (6.0x)** per image; persisted as `data-quality` so behaviour is reproducible across re-edits. - **True inline images** — cursor positioning before/after the image, mid-paragraph insertion, and round-trip-safe save/load. - **SVG support** — intelligent dimension extraction from `viewBox` and width/height attributes; original vectors used as-is. ### Frontend rendering [](#frontend-rendering) - **Magic Images pipeline** — the same cropping, scaling, and processing as `rtehtmlarea`, configurable via Page TSConfig. - **Lazy loading** — honours TYPO3's native `loading="lazy"` / `eager` / `auto` configuration. - **Custom styles** — image styles integrated with the CKEditor 5 style system and `GeneralHtmlSupport`. - **Fluid template overrides** — every fragment (figure, link, popup, caption) is a Fluid partial that themes can override; `figcaption` width is constrained to the image automatically. - **Table images** — images inside CKEditor 5 tables get the full processing chain (max-width, zoom, `t3://` link resolution). ### Integrity & maintenance [](#integrity--maintenance) - **Automatic softref tracking** — RTE image references are registered with the reference index across all RTE-enabled fields, so file moves, renames, and deletions stay consistent. - **Image validation CLI** — `rte_ckeditor_image:validate` detects broken references, nested link wrappers, and stale paths; `--fix` repairs them. - **Upgrade wizard** — runs the same validation as an Install Tool wizard for one-shot repair after major upgrades. - **Preview renderer** — images stay visible in the page module preview, with explicit warnings when a reference is broken. - **Content Blocks support** — a ViewHelper renders RTE image previews inside Content Blocks backend templates. ### Quality & security [](#quality--security) - **PSR-14 events** for extensibility at every rendering decision point. - **Defense-in-depth security**: caption XSS sanitization, file-visibility validation, URL protocol allowlist (`http`, `https`, `mailto`, `tel`, `t3`), SVG sanitization, SSRF protection on external image fetch, and `style`-attribute exclusion. - **PHPStan level 10**, strict-rules, deprecation-rules, [phpat](https://github.com/carlosas/phpat) architecture rules — **zero baseline errors**. - **SLSA Level 3** provenance attestation, signed release tags, [OpenSSF Best Practices](https://www.bestpractices.dev/projects/11718) participation. --- Requirements ------------ [](#requirements) ComponentSupported versionsTYPO3**13.4.21+ LTS** or **14.3+ LTS**PHP**8.2**, 8.3, 8.4, 8.5Required TYPO3 extensions`typo3/cms-rte-ckeditor` (extension key `rte_ckeditor`, shipped with TYPO3 core)Required PHP extensions`ext-dom`, `ext-libxml`> The CKEditor 5 plugin auto-integrates with **`GeneralHtmlSupport`** for image styles — no extra config required. ### Version compatibility [](#version-compatibility) The `main` branch targets the current TYPO3 LTS releases. Earlier TYPO3 versions are served by dedicated, version-pinned branches. Composer selects the right series automatically from your installed TYPO3 version, or you can pin it explicitly (e.g. `composer require netresearch/rte-ckeditor-image:^12.0`). TYPO3Extension branchLatest releasePHPStatus**13.4 LTS / 14.3 LTS**[`main`](https://github.com/netresearch/t3x-rte_ckeditor_image/tree/main)13.10.08.2 – 8.5**Actively maintained** (CKEditor 5)**12.4 LTS**[`TYPO3_12`](https://github.com/netresearch/t3x-rte_ckeditor_image/tree/TYPO3_12)12.0.128.1+Maintained (bugfixes)**11.5 LTS**[`TYPO3_11`](https://github.com/netresearch/t3x-rte_ckeditor_image/tree/TYPO3_11)11.0.177.4+End of life — available, no further updates**10.4 LTS**[`TYPO3_10`](https://github.com/netresearch/t3x-rte_ckeditor_image/tree/TYPO3_10)10.2.5—End of life — available, no further updates> The `TYPO3_12` and `main` branches use **CKEditor 5** (matching TYPO3 core's CKEditor 5 integration from v12 onward); the `TYPO3_11` and `TYPO3_10` branches use the legacy **CKEditor 4**. The features described below target `main` (TYPO3 v13/v14). --- Installation ------------ [](#installation) ### 1. Install via Composer [](#1-install-via-composer) ``` composer require netresearch/rte-ckeditor-image ``` ### 2. Enable the Site Set [](#2-enable-the-site-set) Activating the shipped **Site Set** wires up both the backend RTE preset (with the `insertimage` button) and the frontend TypoScript for image processing in one step. Add the extension to your site's `config.yaml`: ``` # config/sites//config.yaml dependencies: # This is the Site Set name (declared in the extension's # Configuration/Sets/RteCKEditorImage/config.yaml), not the extension key. - netresearch/rte-ckeditor-image ``` > **Using Bootstrap Package or another theme extension?** List `netresearch/rte-ckeditor-image` **after** them in your dependencies, so the RTE preset wins the load order. ### 3. (Alternative) Manual TypoScript import [](#3-alternative-manual-typoscript-import) If you prefer to manage TypoScript load order yourself rather than rely on Site Sets: ``` @import 'EXT:rte_ckeditor_image/Configuration/TypoScript/ImageRendering/setup.typoscript' ``` ### 4. (Optional) Custom RTE preset [](#4-optional-custom-rte-preset) If you maintain your own RTE preset and want to inject the image plugin into it: ```