CKEditor Rich Text Editor Image Support

Diese Erweiterung fügt dem CKEditor den TYPO3 eigenen Bildbrowser hinzu, so dass man die Bilder wie gewohnt verwalten und einfügen kann.

• Gleiche Bildbehandlung wie rtehtmlarea (magische Bilder, übliche RTE TSConfig unterstützung)
• Es wird der Bildbrowser aus Ihrer Typo3 Konfiguration verwendet
• Dialog zum Ändern von Breite, Höhe, Alt und Titel. Die Seitenverhältnis werden übrigens automatisch beibehalten.

Installation

Schritt 1 - Installieren Sie die Erweiterung

Entweder mit dem Composer vom Packagist

composer req netresearch/rte-ckeditor-image:^10.1

Oder von TYPO3 TER herunterladen (https://extensions.typo3.org/extension/rte_ckeditor_image/) und dann in der Administration über „Extensions“ hochladen und installieren.

Oder einfach gleich in der Administrationsoberfläche unter „Extensions“ suchen und installieren.

Schritt 2 - Aktivieren Sie die Erweiterung

Zum Aktivieren kann man entweder den Erweiterungsmanager nutzen oder über den folgenden Befehl in der Kommandozeile:

./typo3/cli_dispatch.phpsh extbase extension:install rte_ckeditor_image

Schritt 3 – Einbinden des Plugins in den Editor

Es muss unbedingt noch die Konfiguration des Editors bearbeitet werden. Dazu muss eine Voreinstellung für rte_ckeditor hinzugefügt oder die vorhandenen überschrieben/angepasst werden. Eine neue Voreinstellung würde dann wie folgt in der ext_localconf.php aussehen.

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

Nutz man z.B. das Bootstrap Package muss die unter typo3conf/ext/bootstrap_package/Configuration/RTE die default.yaml angepasst werden. Oben muss folgendes im Abschnitt Import ergänzt werden:

Zusätzlich muss noch im Abschnitt „removePlugins“ – image entfernt werden.

Konfiguration

Maximale Breite/Höhe

Die maximalen Abmessungen beziehen sich auf die Konfiguration für „magic Images“, die in Page TSConfig eingestellt werden müssen:

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

Falls die TSConfig-Einstellungen aus benutzerdefinierten Template-Erweiterungen nicht korrekt wiedergegeben werden (siehe https://forge.typo3.org/issues/87068) einfach die Einstellungen in die Root Page Config einfügen.

Verwendung als Lightbox mit fluid_styled_content

# Template-Konstanten
styles.content.textmedia.linkWrap.lightboxEnabled = 1

Konfigurieren Sie eine Standard-CSS-Klasse für jedes Bild

# TS-Einrichtung
lib.parseFunc_RTE {
    // Standardklasse für Bilder im Bodytext:
    nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib.class {
      default = my-custom-class
    }
}

Unterstützung für lazyload von Bildern

Die Extension unterstützt TYPO3 lazyload handling (fluid_styled_content) für nativen Browser lazyload.

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

Erlaubte Erweiterungen

Standardmäßig sind die Erweiterungen aus $TYPO3_CONF_VARS['GFX']['imagefile_ext'] erlaubt. Sie können dies jedoch für CKEditor außer Kraft setzen, indem Sie folgendes in Ihre YAML-Konfiguration aufnehmen:

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