Skip to content
Image support in CKEditor for the TYPO3 ecosystem
PHP JavaScript
Branch: master
Clone or download
muh-nr [TASK] #45: Update image reference index (#62)
*  Add RteImagesSoftReferenceIndex (this was copied from sgalinski/tinymce4-rte)
	*  Configure RTE images for soft reference index

		Right now only tt_content.bodytext but the same logic can be applied
		to any other RTE field.
Latest commit 8005c8b Aug 16, 2019

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.