CKEditor in TYPO3
Die neue LTS von TYPO3 in der Version 8.7 bringt einen neuen Helfer für Editoren mit. Texte können ab jetzt mit dem CKEditor editiert werden.
Neben einer angenehmen Konfiguration bringt der CKEditor vor allem eine große Menge an Plugins für die verschiedensten Anwendungsbereiche mit (beispielsweise einfügen von Bildern aus der Zwischenablage). Für TYPO3 gibt es bereits ein paar mitgelieferte Plugins, wie beispielsweise den gewohnten typolink Wizard.
Der CKEditor ist ab TYPO3 LTS 8.7 als Standard eingestellt.
- Hier geht es zur Webseite des CKEditors: https://ckeditor.com/
- Die Dokumentation für Entwickler zum CKEditor gibt es hier: https://ckeditor.com/docs/
- Add-Ons hier: https://ckeditor.com/cke4/addons/plugins/all
Eigene Konfigurations Vorenistellungen können in der ext_localconf.php registriert werden:
/**
* Register RTE preset config to use with CKEditor
*/
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['your_preset'] = 'EXT:verndor_extname/Configuration/Yaml/RTE/Default.yaml';
Eine größtenteils zurechtgeschnittene YAML Konfiguration für den CKEditor könnte etwas so aussehehn (Default.yaml):
imports:
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
editor:
externalPlugins:
typo3link: { resource: "EXT:rte_ckeditor/Resources/Public/JavaScript/Plugins/typo3link.js", route: "rteckeditor_wizard_browse_links" }
config:
# css definitions for the editor
contentsCss: "EXT:vendor_extname/Resources/Public/css/rte.css"
# can be "default", but a custom stylesSet can be defined here, which fits TYPO3 best
stylesSet:
# custom block level style
- { name: "Button", element: "a", attributes: { class: "your-css-class" } }
# limited selection of block formats
format_tags: "h3;h4;h5;p"
# configuration of the editors toolbar
toolbarGroups:
- { name: clipboard, groups: [clipboard, undo] }
- { name: links }
- "/"
- { name: styles }
- { name: basicstyles, groups: [ basicstyles, cleanup ] }
- { name: paragraph, groups: [ list, blocks ] }
# uncomment below for html display of rte
#- { name: mode }
# these are the names of the plugins to disable
removeButtons:
- Anchor
- Superscript
- Subscript
- Underline
- Strike
- NumberedList
Die Voreinstellungen können dann per default oder expliziet für einzelne Felder
# In ext_localconf.php registered preset.
RTE.default.preset = your_preset
# Preset for tt_content textmedia
RTE.tt_content.types.textmedia.bodytext.preset = full
# Preset for ext:tx_news
RTE.config.tx_news_domain_model_news.bodytext.preset = default
Hat dir der Artikel gefallen?
Werkraum News:

Toller Podcast zu Künstliche Intelligenz von Sascha Lobo
Wir von werkraum träumen ja schon seit langem vom eigenen Podcast, wäre das nicht immer so viel spannende Projekte, die es zu erledigen gibt. Solange hören wir einfach andere…
Matomo im DDEV installieren
Ich zeige euch wie man eine lokale Matomo Instanz im DDEV nutzen kann.
Strukturierte Daten - schema.org
Suchmaschinen mit den richtigen Daten füttern ist einfacher als man denkt.