TYPO3 8.7 CKEditor

Der neue TYPO3 RTE – CKEditor

Als TYPO3-Agentur haben wir den Anspruch ein TYPO3-System den Redakteuren so bequem und einfach wie möglich einzurichten. Ein wichtiger Teil dabei ist der RTE (Rich Text Editor). Ein Rich Text Editor ermöglicht es Text beim Einpflegen im Backend zu formatieren – also „rich“ zu machen. So können Teile des Textes z.B. fett hervorgehoben werden, Links gesetzt oder Tabellen erstellt werden. Der RTE ist somit ein wichtiges Tool für einen Redakteur. Mit der TYPO3 LTS-Version 8.7 wurde der RTE ausgetauscht, der alte RTE „htmlArea“ wurde nun mit den „CKEditor“ ersetzt.

Mit dem CKEditor kommt auch eine neue YAML-Konfiguration einher, was uns TYPO3-Entwickler die Einstellungen etwas einfacher und lesbarer macht. Wie genau der neue RTE CKEditor konfiguriert werden kann, möchte ich hier näher betrachten.

Schauen Sie doch einmal in die Demo des CKEditors.

Grundkonfiguration des CKEditors

Der CKEditor in TYPO3 bringt 3 vorgefertigte Standard-Konfigurationen (default, full, minimal) mit, welche im PageTSconfig gewählt werden können. Es ist zudem möglich dem RTE bestimmter Datentypen im PageTSconfig andere Konfigurationen zuzuweisen.

// Fügt die Konfiguration "full" allen RTE's hinzu
RTE.default.preset = full

// Fügt die Konfiguration "minimal" dem bodytext von Inhaltselementen des Typs textmedia hinzu
RTE.config.tt_content.bodytext.types.textmedia.preset = minimal 

// Fügt die Konfiguration "default" dem bodytext von News-Datensätzen hinzu
RTE.config.tx_news_domain_model_news.bodytext.preset = default
CKEditor Konfiguration "Default"

CKEditor Konfiguration „Default“

CKEditor Konfiguration "Full"

CKEditor Konfiguration „Full“

CKEditor Konfiguration "Minimal"

CKEditor Konfiguration „Minimal“

Anlegen einer eigenen Konfiguration

In der Regel wird für eine individuelle TYPO3-Einrichtung auch eine individuelle Konfiguration des RTE’s benötigt. Diese individuelle Konfiguration muss in der ext_localconf.php einer Extension vorerst registriert werden. Danach kann die eigene CKEditor-Konfiguration im PageTSconfig zugewiesen werden – in diesem Beispiel „cs_presets“. Der angegebene Pfad zur YAML-Datei enthält die komplette Konfiguration des CKEditors.

Die YAML-Dateien der Standard-Konfigurationen können unter dem Pfad typo3/sysext/rte_ckeditor/Configuration/RTE eingesehen werden und als Orientierung dienen.

// Individuelle RTE-Konfiguration registrieren in der ext_localconf.php
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['cs_presets'] = 'EXT:cs_templates/Configuration/RTE/CsPresets.yaml';
// Zuweisen der Konfiguration im PageTSconfig
RTE.default.preset = cs_presets

Eine individuelle YAML-Konfiguration kann beispielsweise so aussehen:

# 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:
    contentsCss: "EXT:cs_templates/Resources/Public/Css/editor.css"
    stylesSet:
      - { name: "Rote Schrift", element: "span", attributes: { class: "highlighted red"} }
      - { name: "Button", element: "a", attributes: { class: "button"} }
      - { name: "Checkliste", element: "ul", attributes: { class: "check-list"} }

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

    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 ] }
      - { name: document, groups: [ mode ] }

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

    extraPlugins:
      - justify

    removePlugins:
      - image

    removeButtons:
      - Strike
      - Anchor
      - Outdent
      - Indent
      - Blockquote
      - JustifyBlock

Bereich imports

Im ersten Teil der YAML-Datei „imports“ können Konfigurationen des CKEditors von TYPO3 importiert werden. Die Processing.yaml beinhaltet die Anweisungen für das Speichern des Textes in der Datenbank (identisch zu RTE.default.proc. im PageTSconfig). In der Base.yaml werden grundlegende Konfigurationen vorgenommen und die Plugins.yaml fügt dem RTE Plugins hinzu, wie den Link-Wizard oder ein Plugin zur Tabellen-Erzeugung.

Bereich editor:config

Im Bereich editor:config befindet sich die eigentliche Konfiguration des CKEditors, also das Hinzufügen bzw. Entfernen von Funktionen.

  • contentsCss:
    Hier kann der Pfad zu einer CSS-Datei angegeben werden, welche für die Ansicht im CKEditor verwendet wird. Hier sollten alle zur Auswahl stehenden CSS-Klassen der Stile enthalten sein, damit der Redakteur diese Stile direkt im CKEditor einsehen kann.
  • stylesSet:
    In diesem Abschnitt können beliebig viele eigene Stile definiert werden. Der Redakteur bekommt somit z.B. die Möglichkeit einem Link die Stile „Button“, „Arrow“ oder „Underlined“ zuzuweisen.

    editor:
      config:
        stylesSet:
          - { name: "Rote Schrift", element: "span", attributes: { class: "highlighted red"} }
          - { name: "Button", element: "a", attributes: { class: "button"} }
          - { name: "Checkliste", element: "ul", attributes: { class: "check-list"} }

    Der Name eines Stils ist der Titel, den der Redakteur im CKEditor zur Auswahl bekommt. Als Element wird das HTML-Element definiert, für welches der Stil angewendet werden kann. Sollen hier mehrere Elemente möglich sein, müssen diese einzeln angelegt werden. Eine Mehrfach-Angabe ist nicht möglich. Zudem können die Attribute definiert werden, die an das Element bei Auswahl des Stils hinzugefügt werden sollen. Dies ist in der Regel die entsprechende CSS-Klasse. Hier können auch mehrere CSS-Klassen angegeben werden.

  • format_tags:
    Definiert die zur Verfügung stehenden Absatzformate wie Absatz, Überschrift 2, Überschrift 3 etc.
  • toolbarGroups:
    Hier können die einzelnen Buttons gruppiert werden. So bleiben Funktionen, die thematisch zusammengehörig sind, immer als Gruppe beisammen. Wird das Backend z.B. in einem kleineren Tablet aufgerufen und der Platz ist nicht ausreichend, so brechen Gruppen um. Ein Umbruch innerhalb einer Gruppe ist aber nicht möglich. Eine typische Gruppe ist z.B. „bold“, „italic“, „underlined“. Zum Erstellen dieser Gruppen hilft der Toolbar Configurator des CKEditors weiter.
  • removeButtons:
    Hier können einzelne Buttons bzw. Funktionen entfernt werden, die z.B. durch den Import der Base.yaml eingefügt wurden. Auch hier hilft der Toolbar Configurator des CKEditors weiter.
  • extraPlugins, removePlugins:
    Durch den CKEditor können auch Plugins eingebunden werden, die den Funktionsumfang des RTE’s erweitern. TYPO3 hat einige Plugins standardmäßig eingebunden (z.B. image, justify, font, find, bidi). Diese können in den Bereichen extraPlugins und removePlugins aktiviert bzw. deaktiviert werden. Nähere Beschreibungen zu den Plugins findet man in der Plugin-Übersicht des CKEditors. Es gibts zudem je nach Plugin die Möglichkeit Konfigurationen für ein Plugin vorzunehmen, wie z.B. der Bereich justifyClasses.

Externe Plugins anbinden

In der Plugin-Übersicht des CKEditors gibt es eine große Auswahl an Plugins zur Erweiterung. Einige davon werden bereits von TYPO3 eingebunden – sofern die Konfiguration von TYPO3 auch in der eigenen Konfiguration importiert wird. Möchte man ein weiteres externes Plugin einfügen, muss dieses in der Extension hinterlegt und der Pfad zu der JS-Datei des Plugins verknüpft werden.

In diesem Beispiel erweitert das Plugin dialogadvtab die Erstellung von Tabellen um weitere Funktionen. So kann der Redakteur einer Tabelle z.B. eine CSS-Klasse hinzufügen.

editor:
  externalPlugins:
    # This is a plugin, found here: https://github.com/ckeditor/ckeditor-dev/tree/master/plugins/dialogadvtab
    dialogadvtab: { resource: "EXT:cs_templates/Resources/Public/JavaScript/RTE_Plugins/dialogadvtab/plugin.js" }

Die erlaubten CSS-Klassen müssen in diesem Beispiel noch der RTE parseFunc im Typoscript hinzugefügt werden.

lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class {
    list = clean
    always = 0
    default =
}

Ob für ein Plugin noch weitere Konfigurationen notwendig sind, kann in der jeweiligen Dokumentation eines Plugins entnommen werden.

Konvertierung von hmtlArea zu CKEditor

Sowohl der alte RTE „htmlArea“ als auch der CKEditor speichern Ihren Code in der Datenbank. Die Konvertierung des HTML-Codes von „htmlArea“ zu CKEditor in der Datenbank übernimmt der Upgrade Wizard von TYPO3 beim Update. Danach ist es wichtig vor dem Öffnen und Speichern eines RTE-Textes im Backend den CKEditor entsprechen den Einstellungen von „htmlArea“ zu konfigurieren. So gehen beim erneuten Speichern von bestehenden Elementen keine Daten verloren.

 

Sie haben Lust tiefer in das Thema TYPO3 8.7 LTS einzusteigen? Wir sind stets auf der Suche nach TYPO3-Entwicklern, schauen Sie doch mal bei unseren Stellenangeboten vorbei.

  • 04/08/2017

    Kommentar von Torsten

    Danke für die tolle Anleitung! Soweit funktioniert alles, aber: gibt es nicht eine andere Möglichkeit, ein eigenes Template für den RTE zur Verfügung zu stellen, außer in der ext_localconf.php der Extension? Was passiert bei einem Update? Ich habe zwar eine Extension gefunden (hh_ckeditor_custom), die EINE eigene Konfiguration einbindet, aber eben nur eine. Bei größeren Projekten benötigt man dann doch mehrere…

    • 07/08/2017

      Kommentar von Angela

      Hallo Torsten, danke für dein Feedback! Gerade bei umfangreichen Projekten würden wir sehr empfehlen eine eigene Extension zu erstellen, in der die Templates und Typoscript-Dateien enthalten sind. Hier können dann auch ohne Probleme mehrere RTE-Konfigurationen in der ext_localconf.php registriert werden. Auch die YAML-Dateien der RTE-Einstellungen können dann in dieser Extension hinterlegt werden.
      Die Vorteile einer solchen Extension sind, dass alle individuellen Konfigurationen des Projekts hier verwaltet sind. So kann man das Projekt auch gut mit Versionsverwaltungen wie git entwickeln. Viele Grüße, Angela

  • 31/10/2017

    Kommentar von Michael

    Hallo Angela,
    Du schreibst wie viele andere auch:
    RTE.tt_content.types.textmedia.bodytext.preset = minimal
    würde das bodytext-feld für den type textmedia einstellen.
    Leider funktioniert das bei mir nicht.
    Hast Du das getestet?
    Gibt es eine offizielle Doku dazu?

    • 01/11/2017

      Kommentar von Angela

      Hallo Michael, danke für den Hinweis, die Zeile funktioniert so in der Tat nicht. Ich habe dies nun im Blog-Beitrag korrigiert. Korrekt lautet die Zeile: RTE.config.tt_content.bodytext.types.textmedia.preset = minimal. Als Orientierung zur Einrichtung des CKEditors kannst du die Beispiel-Konfiguration von Carsten Hager nutzen: https://github.com/CarstenHager/ckeditor_config. Viele Grüße, Angela

  • 06/11/2017

    Kommentar von Kurt Kunig

    html5-tags werden beim Speicerhn immer gelöscht!?
    z.B.:

    Überschrift

    Nach dem Speichern bleibt nur das übrig:
    Überschrift

    Wie kann ich meine config.yaml parametrieren, dass diese Tags komplett akzeptiert werden?
    Nur „editor: config: „extraAllowedContent: ‚figure figcaption article footer header video'“ genügt leider nicht.

    • 09/11/2017

      Kommentar von Angela

      Hallo Kurt, setze die HTML5-Tags ebenfalls in der RTE-Konfiguration in „processing: allowTags:“ ein. Ein Beispiel findest du hier ab Zeile 110: https://github.com/CarstenHager/ckeditor_config/blob/master/Configuration/PageTS/RTE/Default.yaml. Ansonsten prüfe auch, ob die HTML-Tags durch das Typoscript lib.parseFunc_RTE erlaubt sind. Viele Grüße, Angela

  • 24/11/2017

    Kommentar von Zapp

    Super Anleitung, vielen Dank! Ich habe leider ein Problem beim Einbinden der CSS-Datei mit contentsCss. Diese wird zwar korrekt eingebunden, dann aber vom Browser gecached, sodass alle nachträglichen Änderungen nicht mehr greifen. Es wird der ETAG für die Datei geschickt und so bleibt sie dann für längere Zeit aktiv. Das kann man zwar umgehen, wenn man im Firebug den Cache deaktiviert, aber das ist keine sehr schöne Lösung, wenn man Redakteuren neue Styles einpielen möchte. Wie macht Ihr das?

    • 28/11/2017

      Kommentar von Angela

      Hallo, vielen Dank für deinen Kommentar. Ich kann deine Frage gut nachvollziehen, wir haben dazu leider noch keine Erfahrungswerte. Stell deine Frage doch im TYPO3 Slack-Channel (http://www.typo3-probleme.de/tag/slack/). Hier bekommt man schnell einen Hinweis oder Tipp. Viele Grüße, Angela

  • 13/12/2017

    Kommentar von Sven

    Danke für die ausführliche Anleitung. Ich sehe den Wechsel des Editors aber als einen großen Schritt zurück.
    Der Editor bietet die Möglichkeit einem Element nur eine Klasse zuzuweisen. Meine Kunden sind es aber beispielsweise gewohnt, unterschiedliche Klassen für verschiedenste Formatierungen (text-transform, text-color, padding, margin usw.) frei zu kombinieren. Man muss nur mal schauen welche Möglichkeiten das Bootstrap Framework da bietet. Grade die Headline-Klassen sind da SEOtechnisch Gold wert.
    Klar ist es möglich, diese Kombinationen vorher zu definieren aber wieviele 100 Kombinationen sollen denn da hinterlegt sein?

    • 13/12/2017

      Kommentar von Angela

      Vielen Dank für deine Anmerkung. Diese Funktion vermissen wir in der Tat auch in einigen Projekten. Dieses Thema ist beim CKEditor (welcher ja ein externes Tool ist) bereits auf dem Tisch. Wir hoffen, dass es hierbei bald ein Update in diese Richtung gibt. Viele Grüße, Angela

  • 10/01/2018

    Kommentar von Chicky

    Hallo. danke für den Artikel. Wie kann man komplexe Formeln darstellen? Der Button für das Formelwidget lässt sich nicht aktivieren….

    • 11/01/2018

      Kommentar von Angela

      Hallo, leider kann ich dir beim Thema Formeln nicht weiterhelfen. Diese Funktion war noch nie eine Anforderung unserer Webseiten. Vermutlich ist das Formelwidget, welches du nutzt, ein externes Plugin des CKEditors. Hier habe ich die Erfahrung gemacht, dass man auch andere, ähnliche Widgets ausprobieren sollte, da die Widgets nicht immer fehlerfrei sind. Manchmal benötigen solche Plugins zudem noch korrekte Einstellungen, z.B. editor: config: colorButton_enableAutomatic: false um korrekt zu funktionieren. Viele Grüße, Angela

Kommentar hinzufügen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.