CKEditor Rich Text Editor Image Support

Die Typo3 Erweiterung "CKEditor Rich Text Editor Image Support" kurz erklärt.

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:

- { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Plugin.yaml" }

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"

 

Kommentare

Keine Kommentare

Kommentar schreiben

* Diese Felder sind erforderlich