CKEditor 4 und Plugins für Typo3

Wie man Plugins für den CKEditor herunterlädt und fürs Typo3 konfiguriert

Auf der Plugins Seite für den CKE4 kann man viele Plugins laden und automatisch konfigurieren lassen, allerdings ist das eher eine Standalone Version.

Da es wenig Sinn macht die heruntergeladene Konfiguration in die Systemextension rte_ckeditor zu extrahieren, stelle ich nun vor, wie man das ganze als Plugin Extension bauen kann.

 

Schritte:

1. Extension Builder

2. Localconf

3. Editor yaml

4. TSConfig

5. TypoScriptSetup (Codesnippet)

6. Alternativen

1. Extension Builder

Zunächst erstellt man sich eine neue Extension. Diese kann man entweder "per Hand" anlegen, oder man benutzt eine Extension wie den Extension Builder.

Den kann man sich über z.B. über Composer laden, über das Typo3 Admin Tool Extensions, oder über Github

Für Composer einfach unter der require das repository hunzufügen und Installieren

Die Ansicht im Extension Builder

Nach dem Speichern kann man die extension Lokal bearbeiten oder auch schon direkt im Extension Tool aktivieren

2. Localconf

Nachdem man die Extension erstellt hat, benötig diese eine ext_localconf.php Diese erstellt man im Hauptverzeichnis der Extension und sie besteht mindestens aus

 

<?php
defined('TYPO3_MODE') or die();

 

Unser Ziel ist es, ein Plugin für den CKEditor einzubinden. Dafür benötigen wir zunächst eine eigene Konfiguration des Editors über eine .yaml Datei.

Zunächst teilen wir Typo3 jedoch mit, dass es ein neues CKEditor Preset gibt.

 

// Register the presets
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['zeitgleich'] = 'EXT:zeitgleich_ckeplugins/Configuration/RTE/Plugin.yaml';

 

Das Preset nennt sich zeitgleich und findet sich in der Extension unter dem angegeben Pfad.

Damit haben wir bereits die minimale Konfiguration erreicht und können nun das Plugin.yaml erstellen.

3. Editor yaml

Wir erstellen also die Plugin.yaml Datei in dem Angegebenen Pfad der Extension.

Wie genau so eine Datei aussehen kann, erfahren wir z.b. in der Typo3 Extension selbst. Diese findet man unter 

 

typo3/sysex/rte_ckeditor/Configuration/RTE/

 

 Hier der Inhalt

 

# 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" }
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Full.yaml" }

 

Zunächst Importieren wir die Konfigurationen der Systemextension in unsere Plugin.yaml. Dabei kann man direkt eine Konfiguration wie hier die Full importieren und hat dann alle Funktionen dieser bereits eingebaut, da wir zunächst noch keinen großen Aufwand haben wollen und unsere eigene Editorkonfiguration schreiben wollen, sondern einfach ein paar Plugins hinzufügen. Dafür müssen wir das Rad nicht neu erfinden, sondern importieren einfach die gewünschte Konfiguration.

 

# Add configuration for the editor
# For complete documentation see docs.ckeditor.com
editor:
  externalPlugins:
    youtube: { resource: "EXT:zeitgleich_ckeplugins/Resources/Public/JavaScript/RTE_Plugins/youtube/plugin.js" }
  config:
    extraPlugins:
      - codesnippet

 

Hier werden nun direkt 2 Plugins hinzugefügt.

Das eine ist das Youtube Plugin und das nächste Codesnippet.

Zunächst das einfache: Der CKEditor in Typo3 besitzt bereits einige Plugins, die man sich aber auch auf der Plugin Seite herunterladen kann. Das Codesnippet Plugin existiert bereits, ist aber normalerweise deaktiviert.

Eine Liste der Vorinstallierten Plugins findet ihr in

 

typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Contrib/plugins

 

Jedoch habe ich derzeit keine Online Referenz hierfür gefunden.

Wir aktivieren also das Codesnippet Plugin mit dem befehl - codesnippet und können zusätzlich ein Style wählen, welches aber vorerst fürs Backend wirkt

 

codeSnippet_theme: 'rainbow'

 

 

Das Externe Youtube Plugin sollten wir nun Heruntergeladen und in einen Ordner in unserer Extension hinterlegt haben.

Ein Sinnvoller Ort ist wie oben beschrieben der Pfad

 

"EXT:<extensionName>/Resources/Public/JavaScript/<NameDesPluginOrdners>/youtube/plugin.js"

 

Das Plugin benötigt zusätzliche Rechte einen iframe zu bauen, also benötigen wir noch

 

#external config
    youtube_width: '550'
    extraAllowedContent: '*(*)[data-*]; iframe'

 

bzw NACH dem editor tag der Konfiguration

 

processing:
  allowTags:
    - iframe

 

 

 

Eine weitere Liste der möglichen Konfigurationen des .yaml Presets findet ihr Hier

4. TSConfig

Da wir nun unseren Editor konfiguriert haben, ist es an der Zeit diesen auch zu aktivieren.

 

Dies lässt sich über die TSConfig von TypoScript realisieren. Da diese Option jedes mal per Hand ausgeführt werden muss, nachdem man unsere Extension installiert hat, lassen wir das lieber automatisch von Typo3 selbst erledigen.

 

RTE.default.preset = zeitgleich

 

Mit dieser Option würdet ihr soweit nicht anders angegeben die zeitgleich Konfiguration aus unserer Extension für alle Rich Text Felder benutzen, aber daran zu denken und die TSConfig zu finden ist mühsam.

Daher bauen wir uns das lieber selbst und zwar in der ext_localconfig.php unserer Extension.

 

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig('<INCLUDE_TYPOSCRIPT: source="FILE:EXT:' . $_EXTKEY . '/Configuration/PageTS/RTE.txt">');

 

Wir fügen einfach diesen Befehl ein und erstellen dann die benötigte Datei RTE.txt im angegebenen Ordner.

Anstatt $_EXTKEY könnt ihr natürlich auch euren Extensionkey selbst angeben

 

RTE {
    default {
        preset = zeitgleich
    }
}

 

Die RTE.txt ist so simpel wie das, was wir in die TSConfig eingeben müssten, aber geschieht nun automatisch durch aktivieren der Extension (Aber eigentlich will man das ja erst, wenn man sie im Template includet hat!)

 

Nach diesem Schritt sollte der Rich Text Editor auf die selbstgebaute Konfiguration eingestellt und sichtbar sein. Der Nächste Schritt wird nur für das codesnippt Plugin benötigt, da diese weitere CSS und JS Datein im Frontend laden muss.

5. TypoScriptSetup (Codesnippet)

page.includeCSS {
    ckexCode = EXT:zeitgleich_ckeplugins/Resources/Public/JavaScript/RTE_Plugins/codesnippet/lib/highlight/styles/rainbow.css
}

page.includeJS {
    ckeCode = EXT:zeitgleich_ckeplugins/Resources/Public/JavaScript/RTE_Plugins/codesnippet/lib/highlight/highlight.pack.js
}

page.headerData.20 = TEXT
page.headerData.20.value (
     <script>hljs.initHighlightingOnLoad();</script>

)

6. Alternativen

Eine alternative zum Plugin per Hand herunterladen ist das installieren von Plugin Extensions der Typo3 Repository.

Hier z.B. das Plugin für Typo3 Images. Einfach wie gewohnt per Composer oder im Backend des Typo3 installieren und dann in der Konfiguration des Editors (Also z.b. Plugin.yaml) den Import

 

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

 

hinzufügen.

Diese Extension kümmert sich dann schon von alleine um den ganzen Rest und man kann hier als neues Feature Bilder direkt vom Typo3 Backend in seinen Text eintragen