Skip to content
Image support in CKEditor for the TYPO3 ecosystem
Branch: master
Clone or download
thommyhh [BUGFIX] Support legacy `clickenlarge` attribute for image zoom
Support old `data-htmlarea-clickenlarge` attribute when rendering the
images from RTE and when reading the image info in the RTE.
Latest commit 782462b Mar 31, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Classes/Controller [BUGFIX] Support legacy `clickenlarge` attribute for image zoom Mar 31, 2019
Configuration [BUGFIX] Support legacy `clickenlarge` attribute for image zoom Mar 31, 2019
Resources/Public [BUGFIX] Support legacy `clickenlarge` attribute for image zoom Mar 31, 2019
.travis.yml [TASK] Update dependencies and deployment infos Mar 19, 2019
README.md [TASK] Update dependencies and deployment infos Mar 19, 2019
composer.json [Fix] Update dev branch naming Mar 14, 2019
ext_emconf.php
ext_localconf.php Added frontend image rendering May 15, 2017

README.md

Image support for CKEditor for TYPO3

This extension adds the TYPO3 image browser to CKEditor.
Add issues or explore the project on github.

  • Same image handling as rtehtmlarea (magic images, usual RTE TSConfig supported)
  • Image browser as usual in e.g. FAL file selector
  • Dialog for changing width, height, alt and title (aspect ratio automatically maintained)

Installation

  1. Install the extension

    1. with composer from packagist

      composer require netresearch/rte-ckeditor-image
    2. with composer from TYPO3 TER composer repository

      composer require typo3-ter/rte-ckeditor-image
    3. download from TYPO3 TER

  2. Activate the extension

    1. in Extension Manager

    2. via command line

      ./typo3/cli_dispatch.phpsh extbase extension:install rte_ckeditor_image
  3. Add a preset for rte_ckeditor or override the default one (as below):

    <?php
    // EXT:my_ext/ext_localconf.php`
    $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['default'] = 'EXT:my_ext/Configuration/RTE/Default.yaml';
    # EXT:my_ext/Configuration/RTE/Default.yaml
    imports:
      # Import default RTE config (for example)
      - { resource: "EXT:rte_ckeditor/Configuration/RTE/Default.yaml" }
      # Import the image plugin configuration
      - { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Plugin.yaml" }
    
    editor:
      config:
        # RTE default config removes image plugin - restore it:
        removePlugins: null
  4. Enable RTE config preset (e.g. default)

    # Page TSConfig
    RTE.default.preset = default
    

Configuration

Maximum width/height

The maximum dimensions relate to the configuration for magic images which have to be set in Page TSConfig:

# Page TSConfig
RTE.default.buttons.image.options.magic {
    maxWidth = 1020  # Default: 300
    maxHeight = 800  # Default: 1000
}

Usage as lightbox with fluid_styled_content

# Template Constants
styles.content.textmedia.linkWrap.lightboxEnabled = 1

Allowed extensions

By default the extensions from $TYPO3_CONF_VARS['GFX']['imagefile_ext'] are allowed. However you can override this for CKEditor by adding the following to your YAML configuration:

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

Deployment

You can’t perform that action at this time.