Der neue Editor für TYPO3 hört auf den Namen CKeditor und ist erfreulich erfrischend. Der alte HTMLArea ist passe, aber wie erstellt man mit dem neuen Editor Elemente abseits der schon vorgegebenen Standardelemente wie Headlines, Listen und Paragraphen?

Hiermit möchte ich euch die Einbindung eines Codesnippet innerhalb des Editors zeigen, welcher auch hier auf der Seite für Codebeispiele genutzt wird.

Vorbereitung

Wir werden die Codesnippet-Aktivierung als eigene Extension realisieren. Dafür sind einige Vorbereitungen nötig und ich verschaffe einen Vorab-Überblick über die Dateien, welche wir im Begriff sind zu erstellen. Das Erstellen eigener Extensions für abgrenzbare Funktionalitäten ist eine gute Praxis und kann auch außerhalb dieses Artikels gerne befolgt werden. Funktionen in eigenen Extensions können einfacher gewartet und veröffentlicht werden. Abgesehen davon lassen sich die Funktionen einfacher einbauen oder auch entfernen, sodass man sein TYPO3 Projekt einfacher an bestimmte Kundenwünsche anpassen kann, ohne für jedes Feature eine Ein- und Abschaltvorrichtung zu realisieren und Code auf Servern auszuliefern, welcher prinzipiell "tot" ist.

Die Dateien die wir erstellen werden sind folgende:

• Configuration/RTE/codesnippet.yml
• Configuration/TsConfig/Page/RTE.tsconfig
• Configuration/TypoScript/constants.typoscript
• Configuration/TypoScript/setup.typoscript
• Resources/Public/JavaScript/InitCodeHighlight.js
• ext_emconf.php
• composer.json
• ext_icon.svg
• ext_localconf.php

Wir werden diese Dateien jetzt Stück für Stück mit Leben füllen.

Codesnippet YAML Datei

Zunächst werden wir uns um das Herzstück kümmern, die YAML-Datei, welche dem CKeditor sagt, was er zu tun hat. Zum glück müssen wir das Codesnippet nicht manuell nachbauen, denn der CKeditor bringt ein nützliches Plugin mit, welches dies bereits kann. Wir müssen CKeditor nur sagen, dass er dieses Plugin aktivieren soll.

Configuration/RTE/codesnippet.yml

imports:
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Default.yaml" }
editor:
  config:
    extraPlugins:
      - codesnippet
    codeSnippet_theme: 'dark'
    toolbarGroups:
      - { name: codesnippet, groups: [ codesnippet ] }

Zunächst importieren wir eine Standardkonfiguration des CKeditor, welche im TYPO3 Kern bereits zur Verfügung steht und uns eine Menge Konfiguration abnimmt.

Danach folgt die Konfiguration des Editors in dem wir das codesnippet Plugin aktivieren.

Wir sagen CKeditor, dass er über extraPlugins das codesnippet Plugin laden soll, aktivieren in diesem Beispiel das "dark"-Theme und fügen den codesnippet button in die Toolbar des CKeditor hinzu.

Aktivieren der Konfiguration im TYPO3 Backend

Nachdem wir eine CKeditor Konfiguration aufgestellt haben, können wir uns nun darum kümmern diese im TYPO3 Backend zu aktivieren. Zunächst müssen wir in der ext_localconf.php unsere YAML Konfiguration registrieren.

ext_localconf.php

<?php

call_user_func(function($extKey){
    $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['codesnippet'] = 'EXT:' . $extKey . '/Configuration/RTE/codesnippet.yml';
}, 'rte_codesnippet');

Mit diesem Code registrieren wir ein RTE Preset mit der Bezeichnung "codesnippet". Dieses Preset aktivieren wir in der Datei Configuration/TsConfig/Page/RTE.tsconfig

Configuration/TsConfig/Page/RTE.tsconfig

RTE.default.preset = codesnippet

Wir haben nun alles vorbereitet, um das codesnippet im CKeditor setzen zu können, es fehlt nur noch eine Sache und das ist die Einbindung der TSconfig in unsere Seite. Ich stelle im Folgenden zwei Ansätze zur Lösung vor, welche eine Aktion im TYPO3 Backend erfordern und legitime Lösungen darstellen.

Einbinden der TSconfig über Seiteneigenschaften

Man kann in TYPO3 eine TSconfig über die Seiteneigenschaften setzen und somit einem Teil des Seitenbaums zur Verfügung stellen. Dies ist hilfreich, wenn man einzelne Konfigurationen, wie zum Beispiel das codesnippet Plugin des RTE, nur in einem Teil des Seitenbaumes aktivieren möchte.

Hierfür navigieren wir in den Seiteneigenschaften in den Resources-Tab. Dort sehen wir ein TSconfig Textfeld, in dem man die Konfiguration von Hand eintragen könnte. Dies ist jedoch nicht zu empfehlen, da dort eingetragener Code nicht in einer Datei abgelegt und damit auch nicht durch ein Versionierungssystem wie GIT oder SVN aufgenommen und versioniert werden kann.

Deutlich eleganter ist der Weg über das darüber liegende Select-Feld, welches wie das Statische Typoscript Feld funktioniert, welches man über das Template Modul sehen kann, wenn man auf "Info/Bearbeiten" und dann auf "Vollständigen Template-Datensatz bearbeiten" klickt. Hier lässt sich eine Statische TSconfig Datei auswählen und laden. Damit unsere TSconfig Datei hier zur Auswahl erscheint, fügen wir die Datei Configuration/TCA/Overrides/pages.php hinzu und schreiben folgendes hinein:

Configuration/TCA/Overrides/pages.php

<?php

call_user_func(function($extKey){
    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::registerPageTSConfigFile(
        $extKey,
        'Configuration/TsConfig/Page/RTE.tsconfig',
        'RTE Codesnippet'
    );
}, 'rte_codesnippet');