TYPO3 8.x ckeditor konfigurieren

Am ersten Februar ist ein Patch im Master erschienen der es ermöglicht den ckeditor zu konfigurieren. Diese Änderung sollte dann ab 14.02.2017 auch in der regulären Version 8.6 zu finden sein. Die Möglichkeit Links über den gewohnten TYPO3 Weg einzufügen gibt es schon etwas länger. Ein paar Dinge sind noch im Plan. Alles in allem ist die bisherige Einbindung sehr schön gelungen und ich freue mich auf die endgültige Version.

Standard Konfigurationen des ckeditors

Zur Konfiguration werden yaml Dateien verwendet. Ähnlich wie in der alten RTE stehen die drei Varianten minimal, default und full zur Verfügung. Diese lassen sich systemweit oder bestimmten Feldern zuweisen.

RTE.default.preset = minimal
RTE.config.tt_content.bodytext.preset = full
RTE.config.tx_news_domain_model_news.bodytext.preset = default

Zeile eins weist das gesamte Backend an nur die minimale Variante zu nehmen. Für den Standard Content und die News werden dann jeweils zwei verschiedene Settings benutzt. Das sollte bei anderen Tabellen mit Textfeldern auch funktionieren. Für die allgemeinen Vorgaben gibt es in der Extension noch drei weitere yaml Dateien.

Eigene Konfiguration

Es werden, ähnlich wie in der rtehtmlarea, noch weitere Konfigurationsmöglichkeiten im Backend dazu kommen. Da der ckeditor ein umfangreiches Ökosystem und Settings hat, ist eine eigene, versionierbare Konfiguration sicher nützlich. Dazu muss die eigene yaml Datei erst mal in der ext_localconf.php registriert werden.

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['custom1'] =
'EXT:template_site/Configuration/PageTs/Rte/Custom1.yaml';

Danach kann sie im PageTS wie die Standard Konfigurationen zugewiesen werden:

RTE.config.tt_content.bodytext.preset = custom1

In der Custom1.yaml werden erst mal die Grund Konfigurationen geladen. Diese können später überschrieben werden.

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" }

Alle weiteren Einstellungen sind direkte ckeditor Settings nur ein bisschen an yaml angepasst. Ich habe ein paar Standard Einstellungen verändert. Die meisten sollten sich selbst erklären. Die contentCss kann auch komplett ersetzt werden. So wie hier konfiguriert, werden die beiden Dateien nacheinander geladen. Die Rte.css wird bei mir so wie sie ist auch im Frontend verwendet.

editor:
config:
contentsCss: ["EXT:rte_ckeditor/Resources/Public/Css/contents.css", "EXT:template_site/Resources/Public/Styles/Rte.css"]
width: "600px"
resize_enabled: true
resize_dir: 'both'
resize_maxWidth: 750
resize_minWidth: 400
uiColor: "#F8F8F8"

Styles

format_tags: "p;h1;h2;h3;h4;h5;pre"
stylesSet:
# block level styles
- { name: "align-left", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-left' }}
- { name: "align-center", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-center' }}
- { name: "align-right", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-right' }}
- { name: "align-justify", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-justify' }}
- { name: "Tiny Paragraph", element: "p", attributes: { 'class': 'p-tiny' }}

# Inline styles
- { name: "Important", element: "span", attributes: { 'class': 'c-important' }}
- { name: "Tiny Word", element: "span", attributes: { 'class': 'c-tiny' }}

# List styles
- { name: 'UL Style 1', element: 'ul', attributes: { 'class': 'ul-style1' } }
- { name: 'UL Style 2', element: 'ol', attributes: { 'class': 'ul-style2' } }
- { name: 'No UL Bullets', element: 'ul', attributes: { 'class': 'no-bullet' } }

Dieser Teil begrenzt die zur Verfügung stehenden Block Formate mit format_tags. Die Projekt eigenen Styles können auch über das stylesheetparser Plugin aus der Rte.css gezogen werden, das hat aber nicht immer das gewünschte Ergebnis. Daher habe ich ein paar Beispiele eingefügt.

Toolbar

Die Symbole in der Toolbar können auf verschiedenen Wegen angeordnet werden. Ich habe mich aufgrund der Flexibilität für die „toolbar“ Settings entschieden. Hier sind auch schon zwei Symbole für zusätzlich Plugins drin.

toolbar:

- [ 'Link', 'Unlink', 'Anchor', 'Table', 'SpecialChar', 'CodeSnippet', 'Youtube' ]
- [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ]
- [ 'NumberedList', 'BulletedList']
- [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord' ]
- [ 'Undo', 'Redo', 'RemoveFormat', 'ShowBlocks' ]
- "/"

- [ 'Format', 'Styles' ]
- [ 'Bold', 'Italic', 'Underline', 'Blockquote', 'Subscript', 'Superscript']
- [ 'Source', 'Maximize', 'About']

Plugins

Der ckeditor liefert von Haus aus viele Erweiterungen mit. Davon ist nur ein kleiner Teil aktiviert. Wenn ich das richtig sehe, verwendet rte_ckeditor die Full Version und da sind 73 Plugins dabei. Nützlich sind da zum Beispiel justify, showblocks, codesnippet oder specialchar.

extraPlugins:
- justify
- specialchar
- showblocks
- codesnippet

justifyClasses:
- align-left
- align-center
- align-right
- align-justify

codeSnippet_theme: 'monokai_sublime'

#external config
youtube_width: '550'

removePlugins:
- image

Unter extraPlugins werden Plugins aktiviert die bereits im rte_ckeditor vorhanden sind. Die Zeilen darunter sind ein paar Einstellungen für die Plugins. Welche es gibt ist auf der jeweiligen Plugin Seite nachzulesen. Für das Plugin codesnippet z.B. müssen die benötigten css und js Dateien noch im TYPO3 Frontend eingebunden werden.

includeCSS {
ckeCode = EXT:rte_ckeditor/Resources/Public/JavaScript/Contrib/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css

includeJSFooter {
ckeCode = EXT:rte_ckeditor/Resources/Public/JavaScript/Contrib/plugins/codesnippet/lib/highlight/highlight.pack.js

Mit removePlugins können bereits geladene Plugins entfernt werden. In dem Fall das image Plugin, da es in Zukunft durch eine TYPO3 kompatible Version ersetzt werden wird.

Zusätzliche ckeditor Plugins

Mitgeliefert und eingebunden wird das Link Plugin um Links in gewohnter TYPO3 Art zu setzen. Auf der ckeditor Seite gibt es noch eine Menge mehr. Aber Vorsicht es ist wie bei TYPO3 Extensions nicht alles Funktional. Evtl. sollte man das Plugin erst mal außerhalb des CMS getestet werden, um Problem schneller zu erkennen.

Ich habe mal ein einfaches Beispiel eingebunden. Es ist ein simples YouTube Plugin. Das Plugin wird herunter geladen und an einer passenden Stelle gespeichert. Da es nicht im Standard Plugin Ordner liegt wird es mit externalPlugins eingebunden.

Das darf nicht in der config Ebene stehen, sondern direkt unter editor. Für ein einfaches Plugin reicht die Angabe des Pfades mit resource. EXT:template_site wird im rte_ckeditor in den korrekten Pfad umgewandelt. Weitere Optionen sind „route“ um evtl. eigene Php Klassen anzusteuern und es lassen sich Optionen übergeben. ExternalPlugins wird in RichTextElement.php zu CKEDITORplugins.addExternal umgesetzt.

config.youtube_width: '550'
externalPlugins:
youtube: { resource: "EXT:template_site/Resources/Public/JavaScript/Ckeditor/Plugins/youtube/" }

Allerdings muss dafür noch iframe erlaubt werden. Für das Rte Prozessing muss in der yaml

processing:
allowTags:
- iframe

hinzugefügt werden. In der contants.ts muss noch styles.content.allowTags:= addToList(iframe) eingetragen werden.

Artikel Suchen