netresearch/rte-ckeditor-image

Image support in CKEditor for the TYPO3 ecosystem

Maintainers

Details

github.com/netresearch/t3x-rte_ckeditor_image

Homepage

Source

Issues

Installs: 336 142

Dependents: 4

Suggesters: 0

Security: 0

Stars: 43

Watchers: 13

Forks: 37

Open Issues: 32

Type:typo3-cms-extension

v11.0.4 2022-06-02 10:40 UTC

Requires

Requires (Dev)

Replaces

  • netresearch/rte_ckeditor_image: v11.0.4
  • typo3-ter/rte-ckeditor-image: v11.0.4

GPL-2.0-or-later 52aaf57bc04aa433a232887d4a19c9097aac8b82

This package is auto-updated.

Last update: 2022-07-21 14:09:55 UTC

README

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 req netresearch/rte-ckeditor-image

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

  5. Include extension Static Template file

    1. go to Template » Info/Modify » Edit whole template record » Includes
    2. choose CKEditor Image Support for Include static (from extensions)

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
}

Current versions of TYPO3 won't render TSConfig settings correctly out of custom template extensions (see the corresponding T3 bug: https://forge.typo3.org/issues/87068). In this case just add the settings to root page config.

Usage as lightbox with fluid_styled_content

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

Configure a default css class for every image

# TS Setup

lib.parseFunc_RTE {
    // default class for images in bodytext:
    nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib.class {
      default = my-custom-class
    }
}

Image lazyload support

The extension supports TYPO3 lazyload handling (fluid_styled_content) for native browser lazyload.

# Template Constants type=options[lazy,eager,auto]
styles.content.image.lazyLoading = lazy

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