Der neue CKEditor in TYPO3

22.10.2018 | Erstellt von Moritz Kiehl

Auch wenn es schon mehrere Artikel zum CKEditor in TYPO3 gibt, sind wir bei werkraum der Meinung, dass man gewisse Möglichkeiten und Funktionen, die der CKEditor bietet, etwas genauer auszuführen könnte. Als Grundlage für diesen Artikel lohnt es sich die Artikel von use TYPO3 , TYPO3WORX und clickstorm anzuschauen.

Funktionen

Button Styling

Das man im CKEditor seine eigenen Stylings für Text, Links und eigentlich alle Elemente benutzen kann, sollte aus den oben genannten Artikeln bekannt sein. Die Möglichkeiten hierbei sind aber praktisch grenzenlos. Zum Beispiel gibt es hier die Möglichkeit, Bootstrap-Klassen an Links anzuhängen und diese somit schon im CKEditor als Buttons zu definieren.

Hier ein Beispiel, wie das in der YAML-Konfiguration gelöst ist:

editor:
  config:
    contentsCss: "EXT:werkraum_template/Resources/Public/css/editor.css"

    stylesSet:
      - { name: 'Großer Button (ausgefüllt) mit Platzhalter für Icon rechts', element: 'a', attributes: {'class': 'btn btn-bg-primary btn-lg btn-primary icon-right'}}
      - { name: 'Großer Button (ausgefüllt) mit Platzhalter für Icon links', element: 'a', attributes: {'class': 'btn btn-bg-primary btn-lg btn-primary icon-left'}}
      - { name: 'Normaler Button mit Platzhalter für Icon rechts', element: 'a', attributes: {'class': 'btn btn-sm btn-primary icon-right'}}
      - { name: 'Normaler Button mit Platzhalter für Icon links', element: 'a', attributes: {'class': 'btn btn-sm btn-primary icon-left'}}

Und hier die zugehörigen Buttons:
Großer Button Icon rechts

Großer Button Icon links

Normaler Button Icon rechts

Normaler Button Icon links

Plugins / Erweiterungen

In beiden genannten Artikeln wird gezeigt, dass man die Möglichkeit hat, den CKEditor mit Plugins zu erweitern. Hier werde ich sowohl von uns genutzte als auch interessante Plugins bzw. TYPO3 Extensions, welche Plugins in den CKEditor integrieren, vorstellen.

CKEditor Fontawesome Add-On

Diese schöne TYPO3 Extension ermöglicht es, Font Awesome-Icons im CKEditor zu benutzen. Die Extension erweitert die vorgefertigten Default-, Full- und Minimalkonfigurationen und ist somit, falls man keine eigene Konfiguration verwendet, sofort einsatzbereit. In die eigene Konfiguration lässt sie sich folgendermaßen einfach

imports:
    - { resource: "EXT:rte_ckeditor_fontawesome/Configuration/RTE/PluginFA5.yaml" }

integrieren.

Falls man anstatt auf Font Awesome 5 auf Font Awesome 4 zurückgreifen möchte, kann man die tun, indem man zuerst im TSconfig das RTE.default.preset anpasst.

RTE.default.preset = fullFA4

RTE.default.preset = defaultFA4

Dann passt man die TYPO3-Konstanten an .

plugin.tx_ckeditor_fontawesome.loadCSS = 

plugin.tx_ckeditor_fontawesome.css = {$path}

oder

plugin.tx_ckeditor_fontawesome.css = maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Die integrierte Rechtschreibüberprüfung (SpellCheckAsYouType (SCAYT))

Dieses Plugin ist im CKEditor schon vorinstalliert und prüft, wie der Name schon sagt, die Rechschreibung während man tippt. Jedoch muss man es bei jedem Text neu aktivieren, jedoch kann man es mit folgendem Code-Schnipsel standartmäßig aktivieren.

editor:
  config:
    defaultContentLanguage: "de"
    defaultLanguage: "de"
    contentsLanguage: "de"
    language: "de"
    scayt_autoStartup: true # Spellcheck always on
    scayt_sLang: "de_DE" # spellcheck language
    wsc_lang: "de_DE"

Neben diesen von uns genutzten Plugins für den CKEditor findet man auf der offiziellen CKEditor Addon Seite noch viele mehr die je nach Bedarf den CKEditor erweitern können. Außerdem gibt er auch die Möglichkeit sich mit dem CKEditor Builder einen vorkonfigurierten Editor mit den gewünschten Plugins und Funktionen herunterzuladen.

Bootstrap Addons

Falls man den CKEditor noch weiter aufschrauben möchte, gelingt dies durch mit diversen Bootstrap Addons, welche Funktionalitäten wie Grids, Buttons, Tabs in den CKEditor integriert. In der Addon Suche der CKEditor Seite findet man sehr viele dieser Erweiterungen.

Wie bindet man neue Plugins in den CKEditor von TYPO3 ein ?

Man lädt sich das Plugin herunter und entpackt es nach : "EXT:your_extension_name/Resources/Public/JavaScript/Plugins/your_plugin_folder".
Man erstellt eine .yaml Datei welche dem CKEditor mitteilt, wo er das Plugin finden kann.
Importieren der Plugin-Konfiguration in ein Preset/ eine eigene CKEditor Konfiguration.

editor:
  externalPlugins:
    <myplugin>:
      resource: "EXT:your_extension_name/Resources/Public/JavaScript/Plugins/your_plugin_folder/your_plugin.js"
      <my_config_option>: <my_config_value>

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

Für den Fall, dass man sich ein eigenes Plugin erstellen will findet man im Blog von TYPO3 WORX eine gut verständliche Anleitung, auf welcher der vorherige Teil basiert.

Schlusswort

Abschließend kann man nur sagen, dass der CKEditor sowohl für Redakteure als auch für Entwickler ein Segen ist, da er in der Benutzung sehr einfach und intuitiv ist, aber es Entwicklern relativ einfach macht den CKEditor zur erweitern oder anzupassen.

Als Quellen für diesen Artikel dienten: