---
title: "System Architecture"
manual: "RTE CKEditor Image"
version: "main"
permalink: "https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:architecture-technology-stack@main"
source: "Architecture/System-Architecture.rst"
rendered: "2026-10-01T01:27:51+00:00"
---

# System Architecture {#architecture-technology-stack}

System architecture overview for the RTE CKEditor Image extension, covering the three-layer architecture, core components, and technology stack.

**Table of Contents**

-   [Overview](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:overview@main)
-   [System Design](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:system-design@main)
-   [High-Level Architecture](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:high-level-architecture@main)
-   [Core Components](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:core-components@main)
-   [Technology Stack](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:technology-stack@main)
-   [Security Considerations](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:security-considerations@main)
-   [Performance Considerations](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:performance-considerations@main)
-   [Related Documentation](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:related-documentation@main)

## Overview {#overview}

This document explains the architectural structure and core components of the RTE CKEditor Image extension. For design patterns and integration details, see [Design Patterns & Integration](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:architecture-design-patterns@main).

### Three-Layer Architecture {#three-layer-architecture}

1.  **CKEditor Plugin Layer** (JavaScript)

    -   Custom typo3image plugin
    -   Model element definition
    -   UI components and commands
    -   Upcast/downcast conversions
1.  **TYPO3 Backend Layer** (PHP)

    -   Controllers for image selection and rendering
    -   Database hooks for content processing
    -   FAL integration
    -   Event listeners
1.  **Frontend Rendering Layer** (PHP/HTML)

    -   TypoScript configuration
    -   Image processing and optimization
    -   HTML generation

## System Design {#system-design}

The rte_ckeditor_image extension follows TYPO3's modern extension architecture with CKEditor 5 integration, providing seamless FAL (File Abstraction Layer) image management within rich text editors.

## High-Level Architecture {#high-level-architecture}

```plantuml
skinparam componentStyle rectangle
skinparam backgroundColor white

package "TYPO3 Backend" {
    component "CKEditor\nPlugin" as CKEditor
    component "Image\nController" as Controller
    component "FAL\nStorage" as FAL
    component "JavaScript\nDialog" as Dialog
    component "Backend\nRoute" as Route

    CKEditor --> Controller
    Controller --> FAL
    CKEditor --> Dialog
    Controller --> Route
}

database "Content Storage" as Storage {
    card "RTE Content with\ndata-htmlarea-* attributes" as Content
}

package "Frontend Rendering" {
    component "TypoScript\nHooks" as TS
    component "Image\nRendering" as Rendering
    component "Rendered\nHTML" as HTML

    TS --> Rendering
    Rendering --> HTML
}

Controller --> Storage
Storage --> TS
```

High-level system architecture

## Core Components {#core-components}

### Backend Layer {#backend-layer}

#### 1\. Controllers (`Classes/Controller/`) {#1-controllers-classes-controller}

-   **SelectImageController**: Backend image selection wizard for FAL integration
-   **ImageRenderingAdapter**: TypoScript adapter bridging `preUserFunc` to modern service architecture

#### 2\. Event Listeners (`Classes/Listener/`) {#2-event-listeners-classes-listener}

-   **RteSoftrefEnforcer**: Auto-adds `rtehtmlarea_images` softref to all RTE fields
-   **RtePreviewRendererRegistrar**: Auto-registers image-aware preview renderer for all CTypes
-   **UpdateImageReferences**: Syncs `src` attributes when FAL files are moved or renamed

#### 3\. Database Hooks (`Classes/Database/`) {#3-database-hooks-classes-database}

-   **RteImagesDbHook**: TCEmain data processing for image references

#### 4\. Data Handling (`Classes/DataHandling/SoftReference/`) {#4-data-handling-classes-datahandling-softreference}

-   **RteImageSoftReferenceParser**: Tracks soft references for link management

### Frontend Layer (CKEditor Plugin) {#frontend-layer-ckeditor-plugin}

#### JavaScript Module (`Resources/Public/JavaScript/Plugins/typo3image.js`) {#javascript-module-resources-public-javascript-plugins-typo3image-js}

-   **Typo3Image Plugin**: CKEditor 5 plugin class
-   **Custom Model**: `typo3image` element with rich attributes
-   **UI Components**: Image dialog, selection modal
-   **Style Integration**: StyleUtils and GeneralHtmlSupport integration
-   **Conversion System**: Upcast (HTML → Model) and Downcast (Model → HTML)

### Configuration Layer {#configuration-layer}

#### YAML Configuration {#yaml-configuration}

-   **Services.yaml**: Dependency injection container configuration
-   **Plugin.yaml**: RTE plugin registration

#### TypoScript {#typoscript}

-   **setup.typoscript**: Frontend rendering configuration
-   **page.tsconfig**: Backend RTE configuration

#### Backend Routes {#backend-routes}

-   **Routes.php**: Backend route definitions for image selection

## Technology Stack {#technology-stack}

-   **PHP**: 8.2+ with strict types
-   **TYPO3**: 13.4 LTS / 14.3 LTS (Core, Backend, Frontend, Extbase, RTE CKEditor)
-   **JavaScript**: ES6 modules
-   **CKEditor**: 5.x provided by TYPO3 core with direct imports from @ckeditor/\* namespace
-   **Dependency Injection**: Symfony service container
-   **Standards**: PSR-12, PER-CS2.0

## Security Considerations {#security-considerations}

-   File access through FAL security layer
-   Backend routes require authentication
-   Input validation on all user data
-   XSS prevention through proper encoding
-   Data attribute sanitization on frontend

## Performance Considerations {#performance-considerations}

-   Processed images cached by TYPO3
-   Lazy loading support for frontend
-   Minimal JavaScript footprint
-   Efficient database queries with soft references

## Related Documentation {#related-documentation}

-   [Design Patterns & Integration](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:architecture-design-patterns@main) \- Design patterns, integration points, and data flow
-   [Controllers API](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:api-controllers@main) \- Controller API reference
-   [CKEditor Plugin Development](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-plugin-development@main) \- CKEditor plugin integration details
-   [Security](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:integration-security@main) \- Security considerations