---
title: "Basic Integration"
manual: "RTE CKEditor Image"
version: "main"
permalink: "https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:examples-basic-integration@main"
source: "Examples/Basic-Integration.rst"
rendered: "2026-10-01T01:27:51+00:00"
---

# Basic Integration {#examples-basic-integration}

Quick start guide demonstrating the installation and basic customization options.

**Table of Contents**

-   [Installation](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:installation@main)
-   [Custom Configuration (Optional)](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:custom-configuration-optional@main)
-   [Related Documentation](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:related-documentation@main)

## Installation {#installation}

**Objective**: Get image functionality working in backend and frontend

### Step 1: Install Extension {#step-1-install-extension}

```bash
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 {#step-2-include-typoscript}

For **frontend rendering**, include the TypoScript:

**Option A: Static Template (Recommended)**

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

**Option B: Direct Import**

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

### Verification {#verification}

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

![Image insertion demo](../Images/demo.gif)

## Custom Configuration (Optional) {#custom-configuration-optional}

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

### Custom Preset {#custom-preset}

**EXT:my_site/Configuration/RTE/Custom.yaml**

```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
```

### Register Custom Preset {#register-custom-preset}

**EXT:my_site/ext_localconf.php**

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

### Enable Custom Preset {#enable-custom-preset}

**Configuration/page.tsconfig**

```typoscript
RTE.default.preset = custom
```

> [!NOTE]
> The default `rteWithImages` preset is automatically configured.
> Custom presets are only needed for specific toolbar or plugin customization.

## Related Documentation {#related-documentation}

-   [Integration & Configuration](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:integration@main) \- Complete configuration guide
-   [Image styles](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:examples-image-styles@main) \- Add custom image styles
-   [Troubleshooting & Support](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:troubleshooting-index@main) \- Problem solving