ckEditor - Bilder einbetten

Nehmen wir einmal an, wir haben ein Projekt geerbt, dessen Redakteure Bilder innerhalb des RTE HTMLArea eingebunden haben. Selbstverständlich sollen Bilder generell über Inhaltselemente eingefügt werden!

Falls aber doch der Wunsch besteht, nachdem nach einem Update auf die TYPO3 Version 8.xx der neue ckEditor zum Einsatz kommen soll, so kann diese Funktion wieder aktiviert werden, so dass alte HTMLArea Inhalte wieder angezeigt werden.

Vorgehen

Zunächst muss die Erweiterung (TYPO3 Extension) rte_ckeditor_image unter "Erweiterungen" installiert werden.

Ckeditor Preset im Tsconfig definieren

Schade, das war's leider noch nicht.

Den Ckeditor kann man konfigurieren. Auf der Rootseite unter Seiteneigenschaften gibt es den Reiter TSConfig. Dort kann man den Funktionsumfang des Editors ändern.

RTE.default.preset = full

oder

RTE.default.preset = minimal

die Bandbreite an Funktionen im Editor zu erweitern, bzw. zu verkleinern.

Folgender Workaround ist notwendig:

Zunächst muss die Erweiterung Extension Builder installiert und aktiviert werden. Unter Adminwerkzeuge erscheint dann die Erweiterung.

Grund: Wir erstellen und aktivieren eine eigene Extension, um dort eine ext_localconf.php Datei laden zu können. Denn, wir werden die Konfigurationsdatei, die unter typo3/sysext/rte_ckeditor/Configuration/RTE/Default.yaml in unseren Ordner kopieren.

Den neuen Ort dieser Datei müssen wir registrieren, und das geschieht in der ext_localconf.php.

Kurz zum Extension Builder:

Name, Vendor name, Key eintragen, Category auf Templates. Rest bleibt für diesen Fall.

Speichern und unter "Erweiterungen" aktivieren. Jetzt wird auf dem FTP ein Verzeichnis mit der Bezeichnung des Keys angelegt.

In dieses - eben vom Extension Builder angelegten Verzeichnisses kommt die folgende ext_localconf.php.

Diese wird mit folgendem Code gefüttert.

<?php
defined( name: 'TYPO3_MODE') || die('Access denied.');

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['dbjepreset'] = 'EXT:dbje/Configuration/RTE/ck_editor_Default.yaml';

Jetzt wird ein neues Verzeichnis angelegt, in dem die Datei ck_editor_Default.yaml liegt:

typo3conf/ext/dbje/Configuration/RTE/ck_editor_Default.yaml

In dieser Datei steht die Konfiguration, die man individuell anpassen kann:

# Load default processing options
imports:
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }

  
# Add configuration for the editor
# For complete documentation see http://docs.ckeditor.com/#!/api/CKEDITOR.config
editor:
  config:

    format_tags: "p;h1;h2;h3;h4;h5;pre"

    toolbarGroups:
      - { name: styles, groups: [ styles, format ] }
      - { name: basicstyles, groups: [ basicstyles ] }
      - { name: paragraph, groups: [ list, indent, blocks, align ] }
      - { name: links, groups: [ links ] }
      - { name: clipboard, groups: [ clipboard, cleanup, undo ] }
      - { name: editing, groups: [ spellchecker ] }
      - { name: insert, groups: [ insert ] }
      - { name: tools, groups: [ table, specialchar, insertcharacters ] }
      - { name: document, groups: [ mode ] }

    justifyClasses:
      - text-left
      - text-center
      - text-right
      - text-justify

    extraPlugins:
      - justify

    removePlugins: null

    removeButtons:
      - Anchor
      - Underline
      - Strike
      - Styles

Wichtig ist

removePlugins: null

Nun müssen wir diese neue Konfiguration zuweisen:

In der Rootseite, oder in der Datei in dem die Tsconfig definiert sind wird nun das Preset definiert:

RTE.default.preset = dbjepreset

Wir erinnern uns. dbjepreset ist in der Datei ext_localconf.php bestimmt worden:

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['dbjepreset'] = 'EXT:dbje/Configuration/RTE/ck_editor_Default.yaml';

Nun sollte alles angezeigt werden.