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:

Wie füge ich CKEditor5 Plugins in TYPO3 12 ein?
Integriere mühelos CKEditor5-Plugins in TYPO3 12! Unser Teaser bietet einen kurzen Einblick, wie du die Vielseitigkeit des CKeditors optimierst und deine Textbearbeitung auf…

Der Schlüssel zur Lesbarkeit: Responsive Font Sizes
Im Dschungel der Internetseiten kann es frustrierend sein, wenn die Schriftgröße nicht mitspielt. Aber keine Sorge, Responsive Font Sizes sind hier, um sicherzustellen, dass…

Einblicke in das Logging-System von TYPO3 und Konfiguration von Log Writern
Tauche ein in die Welt des TYPO3-Loggings! Unser neuester Beitrag zeigt dir nicht nur, wie du das Logging-System optimal konfigurierst, sondern liefert auch Code-Beispiele für…