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.8.0(2mo ago)63991.3k↓18%67[5 issues](https://github.com/netresearch/t3x-rte_ckeditor_image/issues)4AGPL-3.0-or-laterPHPPHP ^8.2CI passing Since May 17Pushed 2mo 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 1mo ago READMEChangelog (10)Dependencies (23)Versions (95)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) Image support for CKEditor for TYPO3 ==================================== [](#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). [![](Documentation/Images/backend-image-properties-dialog.png?raw=true)](Documentation/Images/backend-image-properties-dialog.png?raw=true) Features -------- [](#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 ------------ [](#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 ------------ [](#installation) ### Quick Start [](#quick-start) Install the extension via composer: ``` 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: ``` # 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: ``` @import 'EXT:rte_ckeditor_image/Configuration/TypoScript/ImageRendering/setup.typoscript' ``` ### Custom Configuration (Optional) [](#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: ```