Basic Integration 

Quick start guide demonstrating the zero-configuration installation and basic customization options.

Table of Contents

Zero-Configuration Installation 

Objective: Get image functionality working with zero manual configuration

Installation 

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

That's it! The extension automatically:

  • ✅ Registers the rteWithImages preset for backend RTE
  • ✅ Configures toolbar with insertimage button for all sites
  • ✅ Loads TypoScript for frontend image rendering
  • ✅ No manual configuration required

Result: Full image functionality working out-of-the-box ✅

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
Image insertion demo

The insertimage button is automatically available after installation

Custom Configuration (Optional) 

If you need to customize the RTE configuration, you can create your own preset:

Custom Preset 

EXT:my_site/Configuration/RTE/Custom.yaml 
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
Copied!

Register Custom Preset 

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

Enable Custom Preset 

Configuration/page.tsconfig 
RTE.default.preset = custom
Copied!