Removed Components 

• RTE processing mode ("ts_images")
• SoftReference Index for inline images
• Magic Image processing (automatic scaling, cropping via TSConfig)
• Image storage handling (RTE_imageStorageDir)
• CLI cleanup command (cleanup:rteimages)
• Public API methods (ImportExport->getRTEoriginalFilename(), RteHtmlParser->TS_images_rte())

Later Deprecation 

In TYPO3 v12.4 (Deprecation #99237), the MagicImageService class was deprecated with no direct migration path.

Primary Approach: Structured Content 

Move images from inline RTE fields to proper relational fields:

// TCA Configuration Example
'columns' => [
    'bodytext' => [
        'config' => [
            'type' => 'text',
            'enableRichtext' => true,
        ],
    ],
    'images' => [
        'config' => [
            'type' => 'file',
            'allowed' => 'common-image-types',
            'maxitems' => 10,
        ],
    ],
],

Benefits of Structured Content:

• ✅ Better content reuse
• ✅ Proper metadata management
• ✅ Responsive image generation
• ✅ Clean separation of concerns
• ✅ Modern TYPO3 architecture
• ✅ Better editor experience

Fallback Approach: Extensions 

For projects that need inline image functionality, TYPO3 recommends extensions like rte_ckeditor_image or creating custom extension implementations.

Real-World Requirements 

1. Legacy Content Migration

   Many TYPO3 installations have years of content with inline images. Migrating to structured content requires significant time and resources.

2. Editorial Workflows

   Some editorial teams are trained on inline image workflows and prefer WYSIWYG image placement directly in text.

3. Content Nature

   Certain content types (news articles, blog posts, documentation) naturally contain inline images that are contextually bound to surrounding text.

4. Migration Bridge

   Provides a transition path while planning migration to structured content.

What This Extension Provides 

• Backward compatibility with RTEHtmlArea image workflows
• Magic Image processing (automatic scaling via TSConfig)
• TYPO3 FAL integration (native file browser)
• Modern CKEditor 5 implementation
• Image attributes (width, height, alt, title, quality)
• Custom styles via CKEditor style system
• Event-driven architecture for extensibility

Use This Extension When 

✅ You have legacy content with extensive inline images that cannot be migrated immediately

✅ Editorial workflow requires inline image placement with WYSIWYG editing

✅ Content is tightly coupled to surrounding text (inline diagrams, screenshots, examples)

✅ Migration timeline is long and you need a working solution now

✅ Small to medium projects where structured content overhead isn't justified

Follow TYPO3 Guidelines Instead When 

❌ Starting a new project - Build with structured content from the beginning

❌ Images are reusable - Same images appear across multiple content elements

❌ Need advanced features - Responsive images, WebP conversion, image variants

❌ Multi-language sites - Image metadata needs proper translation workflows

❌ Large editorial teams - Structured content provides better governance

❌ Long-term maintainability - Align with TYPO3's architectural direction

Planning Migration 

1. Audit content - Identify all RTE fields with inline images
2. Create TCA fields - Add proper FAL reference fields
3. Write migration script - Extract inline images to relations
4. Update templates - Adjust Fluid templates for structured content
5. Train editors - Update editorial workflows and documentation

Migration Tools 

TYPO3 provides tools for content migration:

• Data Handler API for programmatic content updates
• TypoScript processors for rendering
• CLI commands for batch processing

This extension can coexist during the migration period.

How to contribute translations 

1. Create a Crowdin account (free for open source contributors)
2. Join the TYPO3 translation team for your language
3. Translate strings directly in the Crowdin web interface
4. Review translations from other contributors
5. Suggest improvements to existing translations

Why translate 

• Make TYPO3 more accessible to speakers of your language
• Help the global TYPO3 community
• No programming knowledge required
• Translations are automatically integrated via pull requests

Translation notes 

• Some terms like "Retina", "Ultra", "Standard" are multilingual - keep as-is or transliterate if more natural in your language
• Context notes are provided for technical terms to help with accurate translation
• Your contributions are reviewed by language coordinators before integration

Need help 

• Contact the TYPO3 localization team on TYPO3 Slack in #typo3-localization-team
• Check the TYPO3 Translation Documentation

Development & Maintenance 

• Netresearch DTT GmbH
• Sebastian Koschel
• Sebastian Mendel
• Rico Sonntag

Community Contributors 

See GitHub Contributors

For Custom RTE Presets 

These examples show how to create custom configurations that override the automatic defaults. If you just installed the extension and it's working, you don't need these.

# Only needed if customizing the default toolbar
editor:
  config:
    toolbar:
      items:
        - insertimage

# Example: Custom preset with limited toolbar
editor:
  config:
    toolbar:
      items:
        - bold
        - italic
        - insertimage

By Use Case 

• Basic editor → Minimal Setup
• Style-aware images → Adding Image Styles
• Responsive images → Integration & Configuration
• Restricted access → File Mounts

By Component 

• CKEditor plugin → Integration & Configuration
• File browser → Integration & Configuration
• Frontend rendering → Frontend Rendering
• Image processing → Image Processing Configuration

Creating Custom Presets 

If you need to customize the toolbar or RTE behavior beyond the defaults, create a custom preset:

imports:
  # Import default RTE config
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Default.yaml" }
  # Import image plugin configuration
  - { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Plugin.yaml" }

editor:
  config:
    toolbar:
      items:
        - heading
        - '|'
        - insertimage
        - link
        - '|'
        - bold
        - italic

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['custom']
    = 'EXT:my_ext/Configuration/RTE/Custom.yaml';

RTE.default.preset = custom

Advanced RTE Configuration 

imports:
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Minimal.yaml" }
  - { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Plugin.yaml" }

editor:
  config:
    removePlugins: null
    toolbar:
      items:
        - insertimage

# Different presets for different fields
RTE.default.preset = default
RTE.config.tt_content.bodytext.preset = full
RTE.config.tt_content.header.preset = simple

Configuration Topics 

• Page TSConfig Setup - Page TSConfig settings and upload configuration
• Frontend Rendering - TypoScript and frontend rendering setup
• Advanced Configuration - Advanced configuration, styles, and best practices

General Documentation 

• Integration & Configuration - Main configuration guide overview
• Quick Start - Quick start guide
• Troubleshooting & Support - Troubleshooting guide

Magic Image Configuration 

Configure maximum image dimensions for automatic image processing:

Example:

RTE.default.buttons.image.options.magic {
    maxWidth = 1920
    maxHeight = 9999
}

Processing Modes 

RTE.default.proc.overruleMode := addToList(default)

Upload Folder Configuration 

Example:

RTE.default.buttons.image.options {
    defaultUploadFolder = 1:rte_uploads/
    createUploadFolderIfNeeded = 1
}

Enable for Specific Content Types 

# Only enable for tt_content bodytext
RTE.config.tt_content.bodytext {
    preset = default
    buttons.image.options.magic {
        maxWidth = 1200
        maxHeight = 800
    }
}

Disable for Specific Fields 

# Disable RTE entirely for specific field
RTE.config.tt_content.header.disabled = 1

File Mounts 

Ensure backend users have appropriate file mounts:

options.defaultUploadFolder = 1:user_uploads/rte/

Access Restrictions 

# Allow only specific file extensions
options.file_list.validFileExtensions = jpg,jpeg,png,gif,webp

Language-Specific Presets 

[siteLanguage("locale") == "de_DE"]
    RTE.default.preset = german
[END]

[siteLanguage("locale") == "en_US"]
    RTE.default.preset = english
[END]

Debug RTE Configuration 

Enable RTE debugging:

RTE.default.showButtons = *
RTE.default.hideButtons =

Verify Configuration Loading 

Check active RTE configuration in backend:

1. Edit content element
2. Open browser console
3. Check CKEDITOR.config object

Configuration Priority 

Configuration precedence (highest to lowest):

1. Field-specific config: RTE.config.tt_content.bodytext
2. Type-specific config: RTE.config.tt_content
3. Default config: RTE.default
4. Extension defaults

Configuration Topics 

• RTE Setup - RTE configuration and basic setup
• Frontend Rendering - TypoScript and frontend rendering setup
• Advanced Configuration - Advanced configuration, styles, and best practices

General Documentation 

• Integration & Configuration - Main configuration guide overview
• Quick Start - Quick start guide
• Troubleshooting & Support - Troubleshooting guide

Frontend Rendering Setup 

The extension provides default configuration. You can customize it:

lib.parseFunc_RTE {
    tags.img = TEXT
    tags.img {
        current = 1
        preUserFunc = Netresearch\RteCKEditorImage\Controller\ImageRenderingAdapter->renderImageAttributes
    }

    tags.a = TEXT
    tags.a {
        current = 1
        preUserFunc = Netresearch\RteCKEditorImage\Controller\ImageRenderingAdapter->renderInlineLink
    }

    nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
        # Remove internal data attributes from frontend
        allparams.unset = 1
        data-htmlarea-file-uid.unset = 1
        data-htmlarea-file-table.unset = 1
        # Keep zoom attributes for popup/lightbox rendering (ImageRenderingAdapter.php)
        # data-htmlarea-zoom.unset = 1
        # data-htmlarea-clickenlarge.unset = 1
        data-title-override.unset = 1
        data-alt-override.unset = 1
    }
}

lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList := addToList(img)

Default CSS Class 

Add default class to all RTE images:

lib.parseFunc_RTE {
    nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib.class {
        default = img-fluid responsive-image
    }
}

Lazyload Configuration 

Enable native browser lazy loading:

styles.content.image.lazyLoading = lazy
# Options: lazy, eager, auto

Lightbox/Popup Integration 

base: 'https://example.com/'
rootPageId: 1
dependencies:
  - netresearch/rte-ckeditor-image

The extension provides lib.contentElement.settings.media.popup configuration with sensible defaults for click-to-enlarge functionality. When editors enable Enlarge on Click in the image dialog, images will open in a JavaScript popup window.

Default Configuration (included in the static template):

lib.contentElement.settings.media.popup {
    # Opens in popup window (800x600 max)
    bodyTag = <body style="margin:0; background:#fff;">
    wrap = <a href="javascript:close();"> | </a>
    width = 800m
    height = 600m
    JSwindow = 1
    JSwindow.newWindow = 1
    directImageLink = 0
}

Using with Lightbox Libraries (PhotoSwipe, GLightbox, etc.):

Override the default configuration to use direct image links with custom CSS classes:

lib.contentElement.settings.media.popup {
    # Direct link to image for lightbox libraries
    directImageLink = 1

    # Add lightbox-specific classes and attributes
    linkParams.ATagParams.dataWrap = class="lightbox" rel="lightbox-gallery"
}

Legacy fluid_styled_content Integration:

If using fluid_styled_content constants, enable lightbox mode:

styles.content.textmedia.linkWrap.lightboxEnabled = 1

Complete TypoScript Configuration Options 

lib.parseFunc_RTE {
    tags.img = TEXT
    tags.img {
        current = 1
        preUserFunc = Netresearch\RteCKEditorImage\Controller\ImageRenderingAdapter->renderImageAttributes
    }
}

lib.parseFunc_RTE {
    tags.a = TEXT
    tags.a {
        current = 1
        preUserFunc = Netresearch\RteCKEditorImage\Controller\ImageRenderingAdapter->renderInlineLink
    }
}

lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img {
    fixAttrib {
        # Remove internal data attributes
        data-htmlarea-file-uid.unset = 1
        data-htmlarea-file-table.unset = 1
        # Keep zoom attributes for popup/lightbox rendering (ImageRenderingAdapter.php)
        # data-htmlarea-zoom.unset = 1
        # data-htmlarea-clickenlarge.unset = 1
        data-title-override.unset = 1
        data-alt-override.unset = 1
    }
}

lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib.class {
    default = img-fluid
    list = img-fluid,img-thumbnail,rounded
}

# Template Constants
styles.content.image.lazyLoading = lazy
# Options: lazy, eager, auto

# Template Constants
styles.content.textmedia.linkWrap.lightboxEnabled = 1
styles.content.textmedia.linkWrap.lightboxCssClass = lightbox
styles.content.textmedia.linkWrap.lightboxRelAttribute = lightbox[{field:uid}]

lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img {
    width =
    height =
    # Allows TYPO3 to process dimensions
}

lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines {
    encapsTagList := addToList(img)
    remapTag.img = p
}

/* Limit RTE image preview size in Page module */
.t3-page-ce-body img {
    max-width: 200px;
    max-height: 150px;
}

$GLOBALS['TYPO3_CONF_VARS']['BE']['stylesheets']['your_sitepackage']
    = 'EXT:your_sitepackage/Resources/Public/Css/backend.css';

Configuration Topics 

• RTE Setup - RTE configuration and basic setup
• Page TSConfig Setup - Page TSConfig settings and upload configuration
• Advanced Configuration - Advanced configuration, styles, and best practices

General Documentation 

• Integration & Configuration - Main configuration guide overview
• Quick Start - Quick start guide
• Troubleshooting & Support - Troubleshooting guide

Adding Image Styles 

Define custom styles for images:

editor:
  config:
    style:
      definitions:
        - name: 'Image Left'
          element: 'img'
          classes: ['float-left', 'mr-3']
        - name: 'Image Right'
          element: 'img'
          classes: ['float-right', 'ml-3']
        - name: 'Image Center'
          element: 'img'
          classes: ['d-block', 'mx-auto']
        - name: 'Full Width'
          element: 'img'
          classes: ['w-100']

Style Groups 

Organize styles in groups:

editor:
  config:
    style:
      definitions:
        # ... style definitions ...

      # Group styles in dropdown
      groupDefinitions:
        - name: 'Image Alignment'
          styles: ['Image Left', 'Image Right', 'Image Center']
        - name: 'Image Size'
          styles: ['Full Width', 'Half Width']

Quality Multipliers 

The extension supports quality multipliers for high-DPI displays and print output:

Editors can select quality from a dropdown in the image dialog. The selection persists with the image and affects frontend processing dimensions.

TSConfig for quality-based processing:

RTE.default.buttons.image.options.magic {
    maxWidth = 1920
    maxHeight = 1080
}

When quality multipliers are applied, the actual processing dimensions are calculated as: display dimensions × quality multiplier, capped by maxWidth/maxHeight.

noScale Mode 

Skip TYPO3 image processing entirely and use original files:

• Manual toggle: Editors can enable No Scaling in the image dialog.
• SVG auto-detection: SVG files automatically use noScale mode.
• Original file delivery: The original file URL is used instead of processed variants.

This is useful for:

• Vector graphics (SVG) that should not be rasterized.
• Images already optimized for web delivery.
• Situations where exact original quality is required.

SVG Support 

The extension handles SVG files with special processing:

• Dimension extraction: Reads dimensions from viewBox or width/ height attributes.
• No rasterization: SVGs are never processed through ImageMagick/GraphicsMagick.
• Automatic noScale: SVG files automatically skip image processing.

Image Processing Configuration 

$GLOBALS['TYPO3_CONF_VARS']['GFX'] = [
    'processor' => 'ImageMagick',
    'processor_path' => '/usr/bin/',
    'processor_enabled' => true,
    'processor_effects' => true,

    // Image quality
    'jpg_quality' => 85,

    // Maximum dimensions
    'imagefile_ext' => 'gif,jpg,jpeg,png,webp',
];

Processed File Cache 

TYPO3 caches processed images in _processed_/ folder. Clear if needed:

# TYPO3 CLI
./vendor/bin/typo3 cache:flush --group=pages

Performance Best Practices 

1. Configure appropriate image processing quality ( jpg_quality: 85).
2. Enable TYPO3 page caching for content with images.
3. Use WebP format where supported.
4. Implement lazy loading for images below the fold.
5. Set reasonable maximum dimensions in TSConfig.
6. Consider using CDN for image delivery in production.

Minimal Setup 

imports:
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Minimal.yaml" }
  - { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Plugin.yaml" }

editor:
  config:
    removePlugins: null
    toolbar:
      items: [insertimage]

Full-Featured Setup 

imports:
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Full.yaml" }
  - { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Plugin.yaml" }

editor:
  config:
    removePlugins: null
    toolbar:
      items:
        - heading
        - '|'
        - bold
        - italic
        - '|'
        - insertimage
        - link
        - '|'
        - bulletedList
        - numberedList
        - '|'
        - style

    style:
      definitions:
        - name: 'Image Left'
          element: 'img'
          classes: ['float-left']
        - name: 'Image Right'
          element: 'img'
          classes: ['float-right']

  externalPlugins:
    typo3image:
      allowedExtensions: "jpg,jpeg,png,gif,webp"

RTE.default {
    preset = full

    buttons.image.options.magic {
        maxWidth = 1920
        maxHeight = 1080
    }
}

lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib.class {
    default = img-fluid
}

Configuration Best Practices 

1. Start with minimal configuration and add features incrementally.
2. Test in staging environment before deploying to production.
3. Use separate RTE presets for different content types.
4. Enable caching for processed images.
5. Set appropriate maxWidth/maxHeight to prevent oversized images.
6. Configure lazy loading for better performance.
7. Use meaningful style names that reflect intent, not appearance.
8. Document custom configurations for team members.

Security Considerations 

• Restrict allowed file extensions to safe image formats.
• Configure appropriate file mounts for backend users.
• Review and limit upload folder permissions.
• Validate image dimensions and file sizes.
• Keep extension and TYPO3 core up to date.

Maintenance 

• Regularly clear processed image cache.
• Monitor storage usage in upload folders.
• Review and clean unused images periodically.
• Keep documentation of custom configurations.
• Test after TYPO3 core or extension updates.

Extension Configuration 

You can customize the automatic behavior via Extension Configuration:

Admin Tools > Settings > Extension Configuration > rte_ckeditor_image

$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['rte_ckeditor_image'] = [
    'enableAutomaticRteSoftref' => true,
    'excludedTables' => 'tx_form_formframework,sys_template',
];

$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['rte_ckeditor_image'] = [
    'enableAutomaticRteSoftref' => true,
    'includedTablesOnly' => 'tt_content,tx_news_domain_model_news',
];

$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['rte_ckeditor_image'] = [
    'enableAutomaticRteSoftref' => false,
];

$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['rte_ckeditor_image'] = [
    'enableAutomaticRteSoftref' => true,
    'enableAutomaticPreviewRenderer' => false,
];

./vendor/bin/typo3 cache:flush

Troubleshooting Third-Party Extension Issues 

# Include static template in your root template
# Template > Info/Modify > Edit whole template record > Includes
# Select: "CKEditor Image Support" for "Include static (from extensions)"

Configuration Topics 

• RTE Setup - RTE configuration and basic setup
• Page TSConfig Setup - Page TSConfig settings and upload configuration
• Frontend Rendering - TypoScript and frontend rendering setup

General Documentation 

• Integration & Configuration - Main configuration guide overview
• Quick Start - Quick start guide
• Troubleshooting & Support - Troubleshooting guide

Caption text 

// Caption is sanitized with htmlspecialchars()
$caption = htmlspecialchars($rawCaption, ENT_QUOTES | ENT_HTML5, 'UTF-8');

Alt and title attributes 

Alt and title text are sanitized before inclusion in HTML output.

CSS classes 

CSS class names are validated and encoded to prevent attribute injection.

When the rule fires 

rel="noreferrer" is appended automatically when both conditions hold:

1. The link target opens a new browsing context — i.e. target is set and not one of _self, _parent, _top (case-insensitive, whitespace-tolerant per the HTML living standard).

2. The URL is external — defined as either:

   • An absolute http:// or https:// URL.
   • A protocol-relative URL (e.g. //example.com/image.jpg, RFC 3986 §4.2 network-path reference) that inherits the page scheme but resolves to a different host.

Relative paths (/fileadmin/...), fragment links (#section), mailto: / tel: schemes, and t3:// URIs (already resolved before this point) are treated as internal and don't trigger the addition.

Token preservation 

Pre-existing rel tokens from the source <a> tag — nofollow, sponsored, noopener, custom values — are preserved through SecurityRelComputer::parseTokens(), which lowercases, deduplicates, and collapses whitespace. noreferrer is added at most once; if the source already declares it, no duplicate is appended.

Example 

<a href="https://example.com" target="_blank">
  <img src="/fileadmin/_processed_/image.jpg" alt="..." />
</a>

After rendering through the figure-wrapped path:

<figure>
  <a href="https://example.com" target="_blank" rel="noreferrer">
    <img src="/fileadmin/_processed_/image.jpg" alt="..." />
  </a>
  <figcaption>...</figcaption>
</figure>

Internal links (e.g. /about or t3://page?uid=42) and links without a target continue to render without rel, matching typolink behavior.

File upload restrictions 

Configure allowed file extensions in TYPO3:

$GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'] = 'gif,jpg,jpeg,png,webp';

Restrict in RTE configuration:

editor:
  externalPlugins:
    typo3image:
      allowedExtensions: "jpg,jpeg,png,gif,webp"

Backend user permissions 

• Configure appropriate file mounts for backend users.
• Restrict upload folder access to necessary directories.
• Use TYPO3 backend user groups for granular control.

Content Security Policy 

Implement CSP headers for additional protection:

Header set Content-Security-Policy "default-src 'self'; img-src 'self' data: https:;"

External image fetching 

The fetchExternalImages option downloads external images to FAL:

$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['rte_ckeditor_image'] = [
    'fetchExternalImages' => true,  // Recommended: download to local storage
];

This prevents:

• Hotlinking to external resources.
• Privacy leaks via external image loading.
• Broken images when external sources change.

Regular updates 

Keep the extension and TYPO3 core updated to receive security patches:

composer update netresearch/rte-ckeditor-image

Step 1: Install Extension 

composer require netresearch/rte-ckeditor-image:^13.0

The extension automatically configures the backend RTE:

• ✅ Registers the rteWithImages preset
• ✅ Configures toolbar with insertimage button for all sites

Step 2: Include TypoScript 

For frontend rendering, include the TypoScript:

Option A: Static Template (Recommended)

1. Go to WEB > Template module
2. Select your root page, edit the template
3. In Includes tab, add: CKEditor Image Support

Option B: Direct Import

@import 'EXT:rte_ckeditor_image/Configuration/TypoScript/ImageRendering/setup.typoscript'

Verification 

1. Backend: Log into TYPO3 backend → Edit any content element → RTE should show image button
2. Frontend: Insert image in RTE → Save → View frontend → Image renders correctly

Custom Preset 

imports:
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Default.yaml" }
  - { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Plugin.yaml" }

editor:
  config:
    toolbar:
      items:
        - heading
        - '|'
        - bold
        - italic
        - '|'
        - insertimage
        - link

Register Custom Preset 

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['custom']
    = 'EXT:my_site/Configuration/RTE/Custom.yaml';

Enable Custom Preset 

RTE.default.preset = custom

Supported Link Types 

• Page: Internal TYPO3 pages (t3://page?uid=123)
• File: Files from FAL (t3://file?uid=456)
• Folder: Folder references
• URL: External URLs (https://example.com)
• Email: Email links (mailto:info@example.com)
• Telephone: Phone links (tel:+1234567890)

Link Attributes 

Each link can have the following attributes:

Link URL

The link target. Can be a TYPO3 link (t3://...) or external URL.

Link Target

Window target for the link:

• (default): Same window
• _blank: New window/tab
• _self: Same window (explicit)
• _parent: Parent frame
• _top: Top frame

Link Title

Advisory title shown as tooltip on hover.

Link CSS Class

CSS classes applied to the <a> element.

Additional Parameters

URL query parameters appended to the link (e.g., &L=1&type=123).

Basic Examples 

# URL without query string
/page + &L=1 → /page?L=1

# URL with existing query string
/page?foo=bar + &L=1 → /page?foo=bar&L=1

# URL with fragment (preserved at end)
/page#section + &L=1 → /page?L=1#section

# URL with both query and fragment
/page?foo=bar#section + &L=1 → /page?foo=bar&L=1#section

PHP Implementation 

The LinkDto::getUrlWithParams() method handles all edge cases:

use Netresearch\RteCKEditorImage\Domain\Model\LinkDto;

$link = new LinkDto(
    url: 'https://example.com/page?existing=param#section',
    target: '_blank',
    class: 'external',
    params: '&utm_source=ckeditor&L=1',
    isPopup: false,
    jsConfig: null
);

// Returns: https://example.com/page?existing=param&utm_source=ckeditor&L=1#section
$fullUrl = $link->getUrlWithParams();

Fluid Template Access 

In custom Fluid templates, access link properties via the link object:

<f:if condition="{image.link}">
    <a href="{image.link.urlWithParams}"
       target="{image.link.target}"
       title="{image.link.title}"
       class="{image.link.class}">
        <f:render partial="Image" arguments="{image: image}" />
    </a>
</f:if>

Link not saved 

Symptom: Link attributes are lost after saving.

Cause: Processing rules may be stripping link attributes.

Solution: Ensure your RTE processing configuration allows link attributes:

processing:
  allowAttributes:
    - { attribute: 'href', elements: 'a' }
    - { attribute: 'target', elements: 'a' }
    - { attribute: 'title', elements: 'a' }
    - { attribute: 'class', elements: 'a' }

Link browser doesn't open 

Symptom: Clicking "Browse..." does nothing.

Cause: JavaScript error or missing backend route.

Solution: Check browser console for errors. Ensure the extension is properly installed and the linkBrowserAction route is accessible.

Parameters not appended correctly 

Symptom: URL shows /page?foo=bar?L=1 (double question mark).

Cause: Parameters are prefixed with ? instead of &.

Solution: Always use & prefix for additional parameters. The getUrlWithParams() method handles normalization automatically.

Available styles 

How to use 

1. Insert an image using the Insert Image button in the toolbar.
2. Click on the image in the editor.
3. A balloon toolbar appears above the image with alignment buttons.
4. Click an alignment button to apply the style.

Configuration (default) 

The balloon toolbar is configured in rteWithImages.yaml:

editor:
  config:
    # Load CSS for alignment styles
    contentsCss:
      - 'EXT:rte_ckeditor_image/Resources/Public/Css/image-alignment.css'

    typo3image:
      toolbar:
        - 'editTypo3Image'
        - '|'
        - 'imageStyle:image-left'
        - 'imageStyle:image-center'
        - 'imageStyle:image-right'
        - '|'
        - 'imageStyle:image-inline'
        - 'imageStyle:image-block'

CSS styles 

The extension provides CSS styles in image-alignment.css:

/* Float left with text wrap */
.image-left { float: left; margin: 0 1rem 1rem 0; }

/* Float right with text wrap */
.image-right { float: right; margin: 0 0 1rem 1rem; }

/* Centered block */
.image-center { display: block; margin: 0 auto 1rem; }

/* Inline with text */
.image-inline { display: inline; vertical-align: middle; }

/* Full-width block */
.image-block { display: block; width: 100%; margin: 1rem 0; }

page {
    includeCSS {
        imageAlignment = EXT:rte_ckeditor_image/Resources/Public/Css/image-alignment.css
    }
}

Caption width constraint 

Figures with captions are automatically constrained to the image width via an inline max-width style on the <figure> element. This prevents long caption text from expanding the figure beyond the image boundary.

The constraint is applied by the Fluid partial Partials/Image/Figure.html:

<figure class="{figureClasses}{additionalClass}"
        {f:if(condition: image.width,
          then: ' style="max-width: {image.width}px"')}>

Long unbreakable words or URLs in captions break via overflow-wrap: break-word in image-alignment.css.

Requirements 

1. Add style to your toolbar configuration.
2. Define style definitions for img elements.
3. Ensure StyleUtils and GeneralHtmlSupport plugins are loaded (automatic).

Configuration example 

imports:
  - { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Default.yaml" }

editor:
  config:
    # Add 'style' to the toolbar
    toolbar:
      items:
        - style           # <-- Required for style dropdown
        - heading
        - '|'
        - insertimage
        - link
        - '|'
        - bold
        - italic

    # Define styles for images
    style:
      definitions:
        - name: 'Float Left (Bootstrap)'
          element: 'img'
          classes: ['float-start', 'me-3', 'mb-3']
        - name: 'Float Right (Bootstrap)'
          element: 'img'
          classes: ['float-end', 'ms-3', 'mb-3']
        - name: 'Centered'
          element: 'img'
          classes: ['d-block', 'mx-auto']
        - name: 'Rounded'
          element: 'img'
          classes: ['rounded']
        - name: 'Thumbnail'
          element: 'img'
          classes: ['img-thumbnail']

How to use 

1. Insert an image.
2. Select the image (click on it).
3. Open the Style dropdown in the main toolbar.
4. Select a style from the dropdown.

Style groups 

Organize styles into groups for better UX:

editor:
  config:
    style:
      definitions:
        - name: 'Float Left'
          element: 'img'
          classes: ['float-start', 'me-3']
        - name: 'Float Right'
          element: 'img'
          classes: ['float-end', 'ms-3']
        - name: 'Thumbnail'
          element: 'img'
          classes: ['img-thumbnail']
        - name: 'Rounded'
          element: 'img'
          classes: ['rounded']

      groupDefinitions:
        - name: 'Image Alignment'
          styles: ['Float Left', 'Float Right']
        - name: 'Image Style'
          styles: ['Thumbnail', 'Rounded']

Style dropdown not appearing 

Symptoms: No "Styles" dropdown visible in the toolbar.

Solution: Add style to your toolbar configuration:

editor:
  config:
    toolbar:
      items:
        - style    # <-- Add this
        - heading
        - insertimage
        # ...

Styles disabled when image selected 

Symptoms: Style dropdown shows options but they're grayed out for images.

Cause: Missing dependencies or incorrect style definitions.

Solution: Verify your style definitions target img elements:

style:
  definitions:
    - name: 'My Image Style'
      element: 'img'      # <-- Must be 'img'
      classes: ['my-class']

Balloon toolbar not showing 

Symptoms: No toolbar appears when clicking an image.

Solution: Ensure you're using the rteWithImages preset or have configured typo3image.toolbar in your RTE configuration.

imports:
  - { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Default.yaml" }

TypoScript Setup 

lib.parseFunc_RTE {
    tags.img = TEXT
    tags.img {
        current = 1
        preUserFunc = MyVendor\MySite\UserFunc\ResponsiveImageRenderer->render
    }
}

PHP Implementation 

namespace MyVendor\MySite\UserFunc;

use TYPO3\CMS\Core\Resource\FileRepository;
use TYPO3\CMS\Core\Resource\ProcessedFile;
use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer;

class ResponsiveImageRenderer
{
    public function render(
        string $content,
        array $conf,
        ContentObjectRenderer $cObj
    ): string {
        // Parse img tag
        if (!preg_match('/<img([^>]*)>/i', $content, $imgMatch)) {
            return $content;
        }

        // Extract data-htmlarea-file-uid
        if (!preg_match('/data-htmlarea-file-uid="(\d+)"/', $imgMatch[1], $uidMatch)) {
            return $content;
        }

        $fileUid = (int)$uidMatch[1];

        // Get FAL file
        $fileRepository = GeneralUtility::makeInstance(FileRepository::class);
        try {
            $file = $fileRepository->findByUid($fileUid);
        } catch (\Exception $e) {
            return $content;
        }

        // Generate responsive variants
        $breakpoints = [
            'xs' => 480,
            'sm' => 768,
            'md' => 992,
            'lg' => 1200,
            'xl' => 1920
        ];

        $srcsetParts = [];
        foreach ($breakpoints as $name => $width) {
            $processedFile = $file->process(
                ProcessedFile::CONTEXT_IMAGECROPSCALEMASK,
                ['width' => $width]
            );
            $srcsetParts[] = $processedFile->getPublicUrl() . ' ' . $width . 'w';
        }

        $srcset = implode(', ', $srcsetParts);
        $sizes = '(max-width: 768px) 100vw, (max-width: 992px) 50vw, 33vw';

        // Replace img tag with srcset version
        $newImg = str_replace(
            '<img',
            '<img srcset="' . htmlspecialchars($srcset) . '" sizes="' . $sizes . '"',
            $imgMatch[0]
        );

        return str_replace($imgMatch[0], $newImg, $content);
    }
}

Result HTML 

<img
    src="/fileadmin/image.jpg"
    srcset="/fileadmin/_processed_/image_480.jpg 480w,
            /fileadmin/_processed_/image_768.jpg 768w,
            /fileadmin/_processed_/image_992.jpg 992w,
            /fileadmin/_processed_/image_1200.jpg 1200w,
            /fileadmin/_processed_/image_1920.jpg 1920w"
    sizes="(max-width: 768px) 100vw, (max-width: 992px) 50vw, 33vw"
    alt="Image description"
/>

Result: Automatic responsive images ✅

Popup Link Configuration 

By default, popup links use the CSS class popup-link. You can customize this to integrate with your lightbox library or styling framework.

lib.contentElement.settings.media.popup {
    # Set custom CSS class for popup/lightbox links
    linkClass = lightbox
}

lib.contentElement.settings.media.popup {
    linkParams.ATagParams = class="fancybox gallery-item"
}

PhotoSwipe Lightbox 

Objective: Integrate PhotoSwipe lightbox library for advanced gallery features

npm install photoswipe

page {
    includeJSFooterlibs {
        photoswipe = EXT:my_site/Resources/Public/JavaScript/photoswipe.min.js
        photoswipe_init = EXT:my_site/Resources/Public/JavaScript/lightbox-init.js
    }

    includeCSS {
        photoswipe = EXT:my_site/Resources/Public/Css/photoswipe.css
    }
}

lib.parseFunc_RTE {
    tags.img = TEXT
    tags.img {
        current = 1
        preUserFunc = MyVendor\MySite\UserFunc\LightboxImageRenderer->render
    }
}

namespace MyVendor\MySite\UserFunc;

use TYPO3\CMS\Core\Resource\FileRepository;
use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer;

class LightboxImageRenderer
{
    public function render(
        string $content,
        array $conf,
        ContentObjectRenderer $cObj
    ): string {
        // Check if zoom enabled
        if (strpos($content, 'data-htmlarea-zoom') === false) {
            return $content;
        }

        // Extract file UID
        if (!preg_match('/data-htmlarea-file-uid="(\d+)"/', $content, $match)) {
            return $content;
        }

        $fileUid = (int)$match[1];
        $fileRepository = GeneralUtility::makeInstance(FileRepository::class);

        try {
            $file = $fileRepository->findByUid($fileUid);
        } catch (\Exception $e) {
            return $content;
        }

        // Remove data attributes for frontend
        $content = preg_replace('/\s*data-htmlarea-[^=]+="[^"]*"/', '', $content);

        // Wrap in lightbox link
        $lightboxLink = sprintf(
            '<a href="%s" data-pswp-width="%d" data-pswp-height="%d" target="_blank">%s</a>',
            $file->getPublicUrl(),
            $file->getProperty('width'),
            $file->getProperty('height'),
            $content
        );

        return $lightboxLink;
    }
}

import PhotoSwipeLightbox from 'photoswipe/lightbox';
import 'photoswipe/style.css';

const lightbox = new PhotoSwipeLightbox({
    gallery: '.ce-bodytext',
    children: 'a[data-pswp-width]',
    pswpModule: () => import('photoswipe'),
});

lightbox.init();

Native Lazy Loading 

Objective: Improve page load performance with native lazy loading

lib.parseFunc_RTE {
    nonTypoTagStdWrap.HTMLparser.tags.img {
        fixAttrib {
            loading {
                set = lazy
            }
            # Remove internal attributes
            data-htmlarea-file-uid.unset = 1
            data-htmlarea-file-table.unset = 1
            # Keep zoom attributes for popup/lightbox rendering
            # data-htmlarea-zoom.unset = 1
        }
    }
}

<img src="..." loading="lazy" alt="..." />

Intersection Observer Fallback 

For older browsers:

page.includeJSFooterlibs.lazyload = EXT:my_site/Resources/Public/JavaScript/lazyload.js

lib.parseFunc_RTE {
    nonTypoTagStdWrap.HTMLparser.tags.img {
        fixAttrib {
            class {
                list = lazyload
            }
            data-src {
                # Copy src to data-src
                stdWrap.field = src
            }
            src {
                # Set placeholder
                set = data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E
            }
        }
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.classList.remove('lazyload');
                imageObserver.unobserve(img);
            }
        });
    });

    document.querySelectorAll('img.lazyload').forEach(img => {
        imageObserver.observe(img);
    });
});

Extended Image Properties 

Objective: Add custom fields to image dialog

import { Plugin } from '@ckeditor/ckeditor5-core';

export default class ExtendedTypo3Image extends Plugin {
    static get pluginName() {
        return 'ExtendedTypo3Image';
    }

    init() {
        const editor = this.editor;

        // Extend schema with custom attributes
        editor.model.schema.extend('typo3image', {
            allowAttributes: ['customCaption', 'customCopyright']
        });

        // Add upcast conversion
        editor.conversion.for('upcast').attributeToAttribute({
            view: 'data-custom-caption',
            model: 'customCaption'
        });

        // Add downcast conversion
        editor.conversion.for('downcast').attributeToAttribute({
            model: 'customCaption',
            view: 'data-custom-caption'
        });

        // Modify image dialog
        editor.on('typo3image:dialog', (evt, { dialog, modelElement }) => {
            // Add custom fields to dialog using native DOM
            const group1 = document.createElement('div');
            group1.className = 'form-group';
            const label1 = document.createElement('label');
            label1.textContent = 'Custom Caption';
            group1.appendChild(label1);
            const captionInput = document.createElement('input');
            captionInput.type = 'text';
            captionInput.className = 'form-control';
            captionInput.name = 'customCaption';
            captionInput.value = modelElement.getAttribute('customCaption') || '';
            group1.appendChild(captionInput);

            const group2 = document.createElement('div');
            group2.className = 'form-group';
            const label2 = document.createElement('label');
            label2.textContent = 'Copyright';
            group2.appendChild(label2);
            const copyrightInput = document.createElement('input');
            copyrightInput.type = 'text';
            copyrightInput.className = 'form-control';
            copyrightInput.name = 'customCopyright';
            copyrightInput.value = modelElement.getAttribute('customCopyright') || '';
            group2.appendChild(copyrightInput);

            dialog.el.appendChild(group1);
            dialog.el.appendChild(group2);

            // Override dialog.get() to include custom fields
            const originalGet = dialog.get;
            dialog.get = function() {
                const attrs = originalGet.call(this);
                attrs.customCaption = captionInput.value;
                attrs.customCopyright = copyrightInput.value;
                return attrs;
            };
        });
    }
}

editor:
  config:
    importModules:
      - '@my-vendor/my-site/extended-typo3image.js'

Fetch and Upload External Images 

$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['rte_ckeditor_image'] = [
    'fetchExternalImages' => true,
];

options.defaultUploadFolder = 1:user_upload/rte_images/

namespace MyVendor\MySite\Hooks;

use TYPO3\CMS\Core\Resource\File;
use TYPO3\CMS\Core\Resource\Folder;

class CustomImageFetchHook
{
    public function postProcessExternalImage(
        string $externalUrl,
        File $uploadedFile,
        Folder $targetFolder
    ): void {
        // Add custom metadata
        $uploadedFile->updateProperties([
            'title' => 'Imported from ' . parse_url($externalUrl, PHP_URL_HOST),
            'description' => 'Automatically fetched external image',
        ]);

        // Trigger image optimization
        $this->optimizeImage($uploadedFile);
    }

    protected function optimizeImage(File $file): void
    {
        // Custom optimization logic
        // e.g., compress, resize, convert format
    }
}

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['rte_ckeditor_image']['postProcessExternalImage'][]
    = \MyVendor\MySite\Hooks\CustomImageFetchHook::class . '->postProcessExternalImage';

Language-Specific Image Variants 

[siteLanguage("languageId") == 0]
    # Default language (English)
    RTE.default.preset = default
[END]

[siteLanguage("languageId") == 1]
    # German
    RTE.default.preset = german
    RTE.default.buttons.image.options.defaultUploadFolder = 1:user_upload/de/
[END]

[siteLanguage("languageId") == 2]
    # French
    RTE.default.preset = french
    RTE.default.buttons.image.options.defaultUploadFolder = 1:user_upload/fr/
[END]

imports:
  - { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Plugin.yaml" }

editor:
  config:
    language: de
    style:
      definitions:
        - name: 'Bild Links'
          element: 'img'
          classes: ['float-left']
        - name: 'Bild Rechts'
          element: 'img'
          classes: ['float-right']

Automatic Image Optimization 

namespace MyVendor\MySite\Hooks;

use TYPO3\CMS\Core\DataHandling\DataHandler;
use TYPO3\CMS\Core\Resource\FileRepository;
use TYPO3\CMS\Core\Utility\GeneralUtility;

class ImageOptimizationHook
{
    public function processDatamap_afterDatabaseOperations(
        string $status,
        string $table,
        string $id,
        array $fieldArray,
        DataHandler $dataHandler
    ): void {
        if ($table !== 'tt_content') {
            return;
        }

        foreach ($fieldArray as $field => $value) {
            if (!$this->isRteField($table, $field)) {
                continue;
            }

            // Find images in RTE content
            preg_match_all('/data-htmlarea-file-uid="(\d+)"/', $value, $matches);

            foreach ($matches[1] as $fileUid) {
                $this->optimizeImage((int)$fileUid);
            }
        }
    }

    protected function isRteField(string $table, string $field): bool
    {
        $tcaConfig = $GLOBALS['TCA'][$table]['columns'][$field]['config'] ?? [];
        return ($tcaConfig['enableRichtext'] ?? false) === true;
    }

    protected function optimizeImage(int $fileUid): void
    {
        $fileRepository = GeneralUtility::makeInstance(FileRepository::class);

        try {
            $file = $fileRepository->findByUid($fileUid);

            // Generate optimized variants
            $file->process(
                \TYPO3\CMS\Core\Resource\ProcessedFile::CONTEXT_IMAGECROPSCALEMASK,
                ['width' => 1920, 'height' => 1080]
            );

            // Generate WebP variant
            $file->process(
                \TYPO3\CMS\Core\Resource\ProcessedFile::CONTEXT_IMAGECROPSCALEMASK,
                ['width' => 1920, 'height' => 1080, 'fileExtension' => 'webp']
            );
        } catch (\Exception $e) {
            // Log error
        }
    }
}

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['t3lib/class.t3lib_tcemain.php']['processDatamapClass'][]
    = \MyVendor\MySite\Hooks\ImageOptimizationHook::class;

Controller Test Example 

namespace Netresearch\RteCKEditorImage\Tests\Functional\Controller;

use TYPO3\TestingFramework\Core\Functional\FunctionalTestCase;

class SelectImageControllerTest extends FunctionalTestCase
{
    protected $testExtensionsToLoad = [
        'typo3conf/ext/rte_ckeditor_image'
    ];

    /**
     * @test
     */
    public function infoActionReturnsJsonForValidFile(): void
    {
        // Import test data
        $this->importDataSet(__DIR__ . '/Fixtures/sys_file.xml');

        // Create request
        $request = $this->createRequest('/typo3/rte/wizard/selectimage')
            ->withQueryParams([
                'action' => 'info',
                'fileId' => 1,
                'table' => 'sys_file'
            ]);

        // Execute
        $response = $this->executeFrontendRequest($request);

        // Assert
        self::assertEquals(200, $response->getStatusCode());

        $json = json_decode((string)$response->getBody(), true);
        self::assertArrayHasKey('uid', $json);
        self::assertArrayHasKey('url', $json);
        self::assertEquals(1, $json['uid']);
    }
}

Database Hook Test Example 

namespace Netresearch\RteCKEditorImage\Tests\Unit\Database;

use Netresearch\RteCKEditorImage\Database\RteImagesDbHook;
use TYPO3\TestingFramework\Core\Unit\UnitTestCase;

class RteImagesDbHookTest extends UnitTestCase
{
    /**
     * @test
     */
    public function processDatamapAddsImageAttributes(): void
    {
        $hook = new RteImagesDbHook(/* dependencies */);

        $fieldArray = ['bodytext' => '<img src="/fileadmin/image.jpg" />'];
        $hook->processDatamap_postProcessFieldArray('new', 'tt_content', '1', $fieldArray, $dataHandler);

        self::assertStringContainsString('alt=', $fieldArray['bodytext']);
    }
}

Execute Test Suites 

# Functional tests
./vendor/bin/phpunit -c Build/phpunit-functional.xml

# Unit tests
./vendor/bin/phpunit -c Build/phpunit-unit.xml

Result: Automated testing suite ✅

Template selection 

The ImageRenderingService automatically selects the appropriate template:

Step 1: Create template directory 

In your site package, create the override directory:

mkdir -p packages/my_sitepackage/Resources/Private/Templates/Image/

Step 2: Configure TypoScript 

Add the template path to your TypoScript setup:

lib.parseFunc_RTE.tags.img {
    # Add your templates with higher priority (higher number = higher priority)
    settings.templateRootPaths {
        10 = EXT:my_sitepackage/Resources/Private/Templates/
    }
    settings.partialRootPaths {
        10 = EXT:my_sitepackage/Resources/Private/Partials/
    }
    settings.layoutRootPaths {
        10 = EXT:my_sitepackage/Resources/Private/Layouts/
    }
}

Step 3: Create override templates 

Copy and modify only the templates you need to customize.

Bootstrap 5 responsive image 

Override Standalone.html for Bootstrap 5 responsive images:

<img src="{image.src}"
     alt="{image.alt}"
     width="{image.width}"
     height="{image.height}"
     class="img-fluid {image.htmlAttributes.class}"
     {f:if(condition: image.title, then: 'title="{image.title}"')}
     {f:if(condition: image.htmlAttributes.style, then: 'style="{image.htmlAttributes.style}"')}
     loading="lazy"
     decoding="async" />

Figure with custom styling 

Override WithCaption.html for custom figure styling:

<figure class="content-image{f:if(condition: image.htmlAttributes.class, then: ' {image.htmlAttributes.class}')}">
    <img src="{image.src}"
         alt="{image.alt}"
         width="{image.width}"
         height="{image.height}"
         class="content-image__img"
         {f:if(condition: image.title, then: 'title="{image.title}"')}
         loading="lazy"
         decoding="async" />
    <figcaption class="content-image__caption">
        {image.caption}
    </figcaption>
</figure>

PhotoSwipe lightbox integration 

Override Popup.html for PhotoSwipe v5 integration:

<a href="{image.link.url}"
   class="pswp-gallery__item {image.link.class}"
   data-pswp-width="{image.width}"
   data-pswp-height="{image.height}"
   {f:if(condition: image.link.target, then: 'target="{image.link.target}"')}>
    <img src="{image.src}"
         alt="{image.alt}"
         width="{image.width}"
         height="{image.height}"
         {f:if(condition: image.title, then: 'title="{image.title}"')}
         {f:if(condition: image.htmlAttributes.class, then: 'class="{image.htmlAttributes.class}"')}
         loading="lazy"
         decoding="async" />
</a>

Lazy loading with placeholder 

Override Standalone.html for progressive image loading:

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {image.width} {image.height}'%3E%3C/svg%3E"
     data-src="{image.src}"
     alt="{image.alt}"
     width="{image.width}"
     height="{image.height}"
     class="lazyload {image.htmlAttributes.class}"
     {f:if(condition: image.title, then: 'title="{image.title}"')}
     {f:if(condition: image.htmlAttributes.style, then: 'style="{image.htmlAttributes.style}"')}
     decoding="async" />

Most Common Issues 

// Ensure these dependencies are present:
static get requires() {
    return ['StyleUtils', 'GeneralHtmlSupport'];
}

Enable Debug Mode 

$GLOBALS['TYPO3_CONF_VARS']['SYS']['devIPmask'] = '*';
$GLOBALS['TYPO3_CONF_VARS']['SYS']['displayErrors'] = 1;

Browser Console 

• Check for JavaScript errors
• Monitor network requests
• Inspect CKEditor plugin loading

TYPO3 Logs 

• Check var/log/typo3_*.log
• Review deprecation log
• Monitor PHP error log

Database Queries 

• Enable SQL debug mode
• Check soft references
• Verify file relations

Self-Help Resources 

1. Check this troubleshooting guide
2. Review Integration & Configuration
3. Consult Examples & Use Cases
4. Search GitHub Issues

Community Support 

GitHub Discussions

github.com/netresearch/t3x-rte_ckeditor_image/discussions

TYPO3 Slack

#ext-rte_ckeditor_image channel

TYPO3 Forum

typo3.org/community/meet

Reporting Bugs 

Report bugs: github.com/netresearch/t3x-rte_ckeditor_image/issues

Include:

• TYPO3 version
• PHP version
• Extension version
• Steps to reproduce
• Error messages
• Browser console output