---
title: "Design Patterns & Integration"
manual: "RTE CKEditor Image"
version: "main"
permalink: "https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:architecture-extension-points@main"
source: "Architecture/Design-Patterns.rst"
rendered: "2026-10-01T01:27:51+00:00"
---

# Design Patterns & Integration {#architecture-extension-points}

Design patterns, integration points, data flow, and extension mechanisms for the RTE CKEditor Image extension.

**Table of Contents**

-   [Overview](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:overview@main)
-   [Key Design Patterns](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:key-design-patterns@main)
-   [Integration Points](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:integration-points@main)
-   [Data Flow](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:data-flow@main)
-   [Extension Points](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:extension-points@main)
-   [Related Documentation](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:related-documentation@main)

## Overview {#overview}

This document explains the design patterns, integration approaches, and data flow used in the RTE CKEditor Image extension. For system architecture and components, see [System Architecture](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:architecture-overview@main).

## Key Design Patterns {#key-design-patterns}

The extension employs several proven design patterns for maintainability and extensibility:

-   **MVC Pattern** \- Controllers, models, and views separation
-   **Event-Driven** \- PSR-14 events for extensibility
-   **Plugin Architecture** \- Modular CKEditor plugin
-   **Soft References** \- TYPO3 reference tracking
-   **Command Pattern** \- CKEditor commands for actions

### Dependency Injection {#dependency-injection}

All PHP classes use Symfony's dependency injection:

```yaml
services:
  _defaults:
    autowire: true
    autoconfigure: true
    public: false
```

This approach provides:

-   Loose coupling between components
-   Easier testing through dependency substitution
-   Clear component dependencies
-   Automatic service wiring

### Event-Driven Architecture {#event-driven-architecture}

TYPO3 event system for loose coupling:

-   `AfterPrepareConfigurationForEditorEvent` \- RTE configuration
-   TCEmain hooks for data processing

Benefits:

-   Components can be extended without modification
-   Third-party extensions can hook into processing
-   Maintainable separation of concerns
-   Clear extension points for customization

### MVC Pattern {#mvc-pattern}

Controllers handle requests, models represent data, views render output:

-   **Controllers**: Process backend requests and coordinate actions
-   **FAL Models**: Represent files and their metadata
-   **TypoScript Views**: Render frontend HTML output

This separation ensures:

-   Clear responsibility boundaries
-   Independent testing of each layer
-   Flexible view rendering strategies
-   Reusable business logic

### Plugin Pattern {#plugin-pattern}

CKEditor 5 plugin system:

-   Custom `typo3image` model element
-   Editor commands and UI components
-   Conversion system for data transformation

Implementation details:

-   Plugin registration via `Plugin.yaml`
-   Custom schema definitions for model elements
-   Bidirectional conversion (upcast/downcast)
-   Integration with CKEditor's command system

## Integration Points {#integration-points}

### TYPO3 Core Integration {#typo3-core-integration}

1.  **RTE CKEditor**: Extends TYPO3's CKEditor integration

    -   Registers custom plugin through YAML configuration
    -   Extends default RTE configuration
    -   Adds TYPO3-specific functionality to editor
1.  **FAL**: Uses File Abstraction Layer for file management

    -   Leverages FAL for unified file handling
    -   Respects file permissions and access rights
    -   Supports all FAL storage drivers
    -   Maintains file reference integrity
1.  **TCEmain**: Hooks into data processing pipeline

    -   Processes image references during save operations
    -   Updates soft references automatically
    -   Validates data integrity
    -   Triggers reference index updates
1.  **Soft References**: Tracks file references for integrity

    -   Custom soft reference parser for RTE images
    -   Enables reference tracking across content
    -   Supports reference index operations
    -   Prevents orphaned file records

### CKEditor Integration {#ckeditor-integration}

1.  **Plugin Registration**: Via JavaScriptModules.php and Plugin.yaml

    -   Module registration in PHP
    -   Plugin configuration in YAML
    -   Integration with TYPO3's asset management
    -   Proper loading order and dependencies
1.  **Custom Model**: `typo3image` element with TYPO3-specific attributes

    -   Schema definition for element structure
    -   Support for data-htmlarea-\* attributes
    -   Custom properties for FAL integration
    -   Validation rules for data integrity
1.  **Style System**: Integration with CKEditor's style drop-down

    -   Custom style definitions
    -   Integration with GeneralHtmlSupport
    -   TYPO3-specific class handling
    -   Style persistence in content
1.  **Conversion**: Bidirectional HTML ↔ Model conversion

    -   **Upcast**: HTML to model during editor initialization
    -   **Downcast**: Model to HTML during save operations
    -   Attribute mapping and transformation
    -   Special handling for TYPO3 data attributes

## Data Flow {#data-flow}

### Image Selection Flow {#image-selection-flow}

```plantuml
skinparam activityBackgroundColor white

start
:User clicks insert image;
:CKEditor plugin opens modal;
:Backend route loads file browser;
:User selects image;
:JavaScript receives file UID;
:Backend API returns image info;
:Dialog opens with image properties;
:User confirms settings;
:typo3image model element created;
:Content saved to database;
stop
```

Image selection workflow

Detailed steps:

1.  **User Interaction**: Editor toolbar button clicked
1.  **Modal Opening**: CKEditor executes custom command
1.  **Browser Loading**: AJAX call to backend route
1.  **File Selection**: User navigates FAL structure
1.  **Data Retrieval**: File UID sent to backend API
1.  **Properties Dialog**: JavaScript populates form with file data
1.  **Confirmation**: User sets dimensions, alignment, etc.
1.  **Model Creation**: CKEditor creates typo3image element
1.  **Persistence**: Content saved with data-htmlarea-\* attributes

### Frontend Rendering Flow {#frontend-rendering-flow}

```plantuml
skinparam activityBackgroundColor white

start
:RTE content loaded from database;
:lib.parseFunc_RTE processes content;
:ImageRenderingAdapter hook invoked;
:FAL file loaded from UID;
:Magic image processing applied;
:Processed image URL generated;
:HTML with processed URL rendered;
:Internal data-* attributes removed;
stop
```

Frontend rendering workflow

Detailed steps:

1.  **Content Retrieval**: Database query loads RTE field
1.  **TypoScript Processing**: lib.parseFunc_RTE activated
1.  **Hook Execution**: Custom rendering hook triggered
1.  **File Loading**: FAL resolves file UID to file object
1.  **Image Processing**: Magic image generation (resize, crop, etc.)
1.  **URL Generation**: Processed image URL created
1.  **HTML Rendering**: Final img tag generated
1.  **Attribute Cleanup**: Internal data-\* attributes stripped

## Extension Points {#extension-points}

Developers can extend the extension through:

1.  **Event listeners** (PSR-14 events)

    -   `AfterPrepareConfigurationForEditorEvent`: Customize RTE configuration
    -   Custom events can be added for additional hooks
    -   Event priority allows fine-grained control
    -   Standard TYPO3 event dispatcher patterns
1.  **TypoScript configuration**

    -   Override rendering settings
    -   Custom image processing instructions
    -   Template modifications
    -   Additional CSS classes or attributes
1.  **XClasses** (not recommended)

    -   Last resort for core modifications
    -   Potential compatibility issues
    -   Better alternatives usually exist
    -   Should only be used when no other option available
1.  **Custom processing hooks**

    -   TCEmain hooks for data manipulation
    -   Content element rendering hooks
    -   Custom transformations during save/load
    -   Validation and sanitization extensions
1.  **Additional CKEditor plugins**

    -   Complementary functionality
    -   Integration with typo3image plugin
    -   Custom commands and UI components
    -   Extended model attributes

### Example Event Listener {#example-event-listener}

```php
use TYPO3\CMS\RteCKEditor\Form\Element\Event\AfterPrepareConfigurationForEditorEvent;

class CustomRteConfigurationListener
{
    public function __invoke(AfterPrepareConfigurationForEditorEvent $event): void
    {
        $config = $event->getConfiguration();

        // Modify configuration as needed
        $config['typo3image']['customSetting'] = 'value';

        $event->setConfiguration($config);
    }
}
```

### Example TypoScript Extension {#example-typoscript-extension}

```typoscript
lib.parseFunc_RTE {
    tags {
        img {
            width = 1920
            height = 1080

            // Custom processing
            params = class="custom-image-class"
        }
    }
}
```

## Related Documentation {#related-documentation}

-   [System Architecture](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:architecture-overview@main) \- System architecture and core components
-   [Services API](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:api-services@main) \- Service layer API documentation
-   [CKEditor Plugin Development](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-plugin-development@main) \- CKEditor plugin integration details
-   [Controllers API](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:api-controllers@main) \- Controller API reference