{"id":2185,"date":"2017-06-20T13:11:53","date_gmt":"2017-06-20T11:11:53","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=2185"},"modified":"2017-11-03T14:22:41","modified_gmt":"2017-11-03T13:22:41","slug":"der-neue-typo3-rte-ckeditor","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/der-neue-typo3-rte-ckeditor\/","title":{"rendered":"Der neue TYPO3 RTE – CKEditor"},"content":{"rendered":"

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

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\u00f6chte ich hier n\u00e4her betrachten.<\/p>\n

Schauen Sie doch einmal in die Demo des CKEditors<\/a>.<\/p>\n

Grundkonfiguration des CKEditors<\/h2>\n

Der CKEditor in TYPO3 bringt 3 vorgefertigte Standard-Konfigurationen (default, full, minimal) mit, welche im PageTSconfig gew\u00e4hlt werden k\u00f6nnen. Es ist zudem m\u00f6glich dem RTE bestimmter Datentypen im PageTSconfig andere Konfigurationen zuzuweisen.<\/p>\n

\/\/\u00a0F\u00fcgt\u00a0die\u00a0Konfiguration\u00a0\"full\"\u00a0allen\u00a0RTE's\u00a0hinzu\r\nRTE.default.preset = full\r\n\r\n\/\/\u00a0F\u00fcgt\u00a0die\u00a0Konfiguration\u00a0\"minimal\"\u00a0dem bodytext von Inhaltselementen des Typs textmedia hinzu\r\nRTE.config.tt_content.bodytext.types.textmedia.preset = minimal \r\n\r\n\/\/\u00a0F\u00fcgt\u00a0die\u00a0Konfiguration\u00a0\"default\"\u00a0dem\u00a0bodytext\u00a0von\u00a0News-Datens\u00e4tzen\u00a0hinzu\r\nRTE.config.tx_news_domain_model_news.bodytext.preset = default<\/pre>\n
\"CKEditor
CKEditor Konfiguration „Default“<\/p><\/div>\n
\"CKEditor
CKEditor Konfiguration „Full“<\/p><\/div>\n
\"CKEditor
CKEditor Konfiguration „Minimal“<\/p><\/div>\n
Anlegen einer eigenen Konfiguration<\/h2>\n
In der Regel wird f\u00fcr eine individuelle TYPO3-Einrichtung auch eine individuelle Konfiguration des RTE’s ben\u00f6tigt. 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\u00e4lt die komplette Konfiguration des CKEditors.<\/p>\n
Die YAML-Dateien der Standard-Konfigurationen k\u00f6nnen unter dem Pfad\u00a0typo3\/sysext\/rte_ckeditor\/Configuration\/RTE<\/strong> eingesehen werden und als Orientierung dienen.<\/p>\n
\/\/ Individuelle RTE-Konfiguration registrieren in der ext_localconf.php\r\n$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['cs_presets'] = 'EXT:cs_templates\/Configuration\/RTE\/CsPresets.yaml';<\/pre>\n
\/\/ Zuweisen der Konfiguration im PageTSconfig\r\nRTE.default.preset = cs_presets<\/pre>\n
Eine individuelle YAML-Konfiguration kann beispielsweise so aussehen:<\/p>\n
# Load default processing options\r\nimports:\r\n    - { resource: \"EXT:rte_ckeditor\/Configuration\/RTE\/Processing.yaml\" }\r\n    - { resource: \"EXT:rte_ckeditor\/Configuration\/RTE\/Editor\/Base.yaml\" }\r\n    - { resource: \"EXT:rte_ckeditor\/Configuration\/RTE\/Editor\/Plugins.yaml\" }\r\n\r\n# Add configuration for the editor\r\n# For complete documentation see http:\/\/docs.ckeditor.com\/#!\/api\/CKEDITOR.config\r\neditor:\r\n  config:\r\n    contentsCss: \"EXT:cs_templates\/Resources\/Public\/Css\/editor.css\"\r\n    stylesSet:\r\n      - { name: \"Rote Schrift\", element: \"span\", attributes: { class: \"highlighted red\"} }\r\n      - { name: \"Button\", element: \"a\", attributes: { class: \"button\"} }\r\n      - { name: \"Checkliste\", element: \"ul\", attributes: { class: \"check-list\"} }\r\n\r\n    format_tags: \"p;h2;h3;h4;h5\"\r\n\r\n    toolbarGroups:\r\n      - { name: styles, groups: [ styles, format ] }\r\n      - { name: basicstyles, groups: [ basicstyles ] }\r\n      - { name: paragraph, groups: [ list, indent, blocks, align ] }\r\n      - { name: links, groups: [ links ] }\r\n      - { name: clipboard, groups: [ clipboard, cleanup, undo ] }\r\n      - { name: editing, groups: [ spellchecker ] }\r\n      - { name: insert, groups: [ insert ] }\r\n      - { name: tools, groups: [ table, specialchar ] }\r\n      - { name: document, groups: [ mode ] }\r\n\r\n    justifyClasses:\r\n      - text-left\r\n      - text-center\r\n      - text-right\r\n      - text-justify\r\n\r\n    extraPlugins:\r\n      - justify\r\n\r\n    removePlugins:\r\n      - image\r\n\r\n    removeButtons:\r\n      - Strike\r\n      - Anchor\r\n      - Outdent\r\n      - Indent\r\n      - Blockquote\r\n      - JustifyBlock<\/pre>\n
Bereich imports<\/h3>\n
Im ersten Teil der YAML-Datei „imports“ k\u00f6nnen Konfigurationen des CKEditors von TYPO3 importiert werden. Die Processing.yaml beinhaltet die Anweisungen f\u00fcr 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\u00fcgt dem RTE Plugins hinzu, wie den Link-Wizard oder ein Plugin zur Tabellen-Erzeugung.<\/p>\n
Bereich editor:config<\/h3>\n
Im Bereich editor:config befindet sich die eigentliche Konfiguration des CKEditors, also das Hinzuf\u00fcgen bzw. Entfernen von Funktionen.<\/p>\n