ckEditor - Embed images

Let's assume we have inherited a project whose editors have integrated images within the RTE HTMLArea. Of course, images should generally be inserted via content elements!

However, if there is a desire to use the new ckEditor after an update to TYPO3 version 8.xx, this function can be reactivated so that old HTMLArea content is displayed again.

Procedure

Firstly, the extension (TYPO3 extension) rte_ckeditor_image must be installed under "Extensions".

Define Ckeditor preset in Tsconfig

Too bad, that's not it yet.

You can configure the Ckeditor. On the root page under page properties there is the TSConfig tab. There you can change the functions of the editor.

RTE.default.preset = full

or

RTE.default.preset = minimal

to extend or reduce the range of functions in the editor.

The following workaround is necessary:

Firstly, the Extension Builder extension must be installed and activated. The extension then appears under Admin tools.

Reason: We create and activate our own extension in order to be able to load an ext_localconf.php file there. Because, we will copy the configuration file, which is located under typo3/sysext/rte_ckeditor/Configuration/RTE/Default.yaml into our folder.

We need to register the new location of this file, and this is done in ext_localconf.php.

Briefly about the Extension Builder:

Enter name, vendor name, key, category on templates. The rest remains for this case.

Save and activate under "Extensions". Now a directory with the name of the key is created on the FTP.

The following ext_localconf.php is placed in this directory, which has just been created by the Extension Builder.

Translated with www.DeepL.com/Translator (free version)

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.