.. include:: /Includes.rst.txt

.. _examples-basic-integration:

=================
Basic Integration
=================

Quick start guide demonstrating the installation and basic customization options.

.. contents:: Table of Contents
   :depth: 3
   :local:

Installation
============

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

Step 1: Install Extension
-------------------------

.. code-block:: 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
--------------------------

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

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

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

**Option B: Direct Import**

.. code-block:: typoscript

   @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

.. figure:: /Images/demo.gif
   :alt: Image insertion demo
   :class: with-shadow
   :width: 600px

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

.. code-block:: yaml
   :caption: 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

Register Custom Preset
-----------------------

.. code-block:: php
   :caption: EXT:my_site/ext_localconf.php

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

Enable Custom Preset
---------------------

.. code-block:: typoscript
   :caption: Configuration/page.tsconfig

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

- :ref:`integration-configuration` - Complete configuration guide
- :ref:`examples-image-styles` - Add custom image styles
- :ref:`troubleshooting-index` - Problem solving