Einfache Schritte zur Konfiguration des CKEditors in TYPO3

Mit der Einführung von TYPO3 8 LTS wurden TYPO3-Entwickler und Redakteure mit effektiveren Backend-Editing-Lösungen, wie sie von CKEditor vorgestellt werden, vertraut gemacht.

Sie müssen nach rte_ckeditor migrieren wann TYPO3-update/upgrade aus früheren TYPO3-Versionen (= <v8).

Hier helfen wir Ihnen, einen schnellen Überblick über die primären Konfigurationsebenen des CKEditor in TYPO3 CMS zu erlangen.

CKEditor ist ein WYSIWYG RTE, welches das direkte Hinzufügen von JavaScript-basierten Codes in Online-Anwendungen oder Webseiten ermöglicht. Es kann unter kommerziellen und Open-Source-Lizenzen bezogen werden.

In den meisten Fällen bieten RTEs Textbereiche, in denen Sie Inhalte bearbeiten und formatieren, Styles anwenden und Dateien nach Ihren Bedürfnissen erstellen können. Mit TYPO3 Version 8.6 können Sie RTE über YAML-Dateien auf einfachste Weise konfigurieren.

Quelle: https://docs.ckeditor.com/ckeditor4/latest/guide/dev_installation.html

1. Überschreiben der voreingestellten Standardkonfiguration

RTE.default.preset = default
# or
RTE.default.preset = full
# or
RTE.default.preset = minimal

2. Textmedien-Element

RTE.tt_content.types.textmedia.bodytext.preset = minimal 

3. News Erweiterungsfeld

RTE.config.tx_news_domain_model_news.bodytext.preset = default

Das YAML-Konfigurationsformat für den CKEditor in TYPO3 besteht aus drei Teilen.

• Processing.yaml enthält Anweisungen zur Codeverarbeitung für das Schreiben in die Datenbank
• Base.yaml bezieht sich auf die grundlegenden Standardeinstellungen des Erscheinungsbildes / der Anzeige der RTE, sowie Möglichkeiten, diese zu ändern.
• Plugins.yaml erlaubt es, der Konfiguration neue Optionen hinzuzufügen.

# Load default processing options
imports:
- { resource: "EXT:site_default/Configuration/PageTSconfig/TceForm/Processing.yaml"}
- { resource: "EXT:site_default/Configuration/PageTSconfig/TceForm/Base.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }

4. Einrichten von Plugins

Verbessern Sie die Erweiterbarkeit von CKEditor um über 200 Plugins, auf die über das Plugin-Verzeichnis zugegriffen werden kann. Ein einfacher Code kann in den CKEditor integriert werden, um nicht standardmäßige Plugins über eine bestimmte Layout-Erweiterung einzubinden.

editor:
config:
allowTags: 
- address
- label

allowTagsOutside: 
- address
- label 

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

extraPlugins:
- justify

removePlugins:
- image

removeButtons:
- Anchor
- Underline
- Strike

# 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 docs.ckeditor.com
editor:
config:
format_tags: "p;h1;h2;h3;h4;h5;pre"
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:
- Anchor
- Underline
- Strike
- Styles

Wenn Sie den in der HTMLArea von RTE vorhandenen HTML-Code in die Datenbank von CKEditor konvertieren möchten, kommt der Upgrade Wizard von TYPO3 zum Einsatz. Um Datenverlust zu vermeiden, ist es notwendig, den CKEditor entsprechend den bestehenden Einstellungen der HTMLArea Ihrer RTE zu konfigurieren. Ebenso wichtig ist es, den RTE-Text im Backend mit größter Sorgfalt zu öffnen und zu speichern.

pageTS

RTE.default {
  showButtons(
   bold, italic, underline,
   left, center, right, justifyfull,
   orderedlist, unorderedlist, indent, outdent, 
   line, link, removeformat,
   copy, cut, paste, undo, redo 
  )
  toolbarOrder(
   bold, italic, underline, bar, 
   left, center, right, justifyfull,
   orderedlist, unorderedlist, bar, indent, outdent, linebreak,
   line, link, removeformat, bar,
   copy, cut, paste, bar, undo, redo 
 )
}

yaml

editor:
  config:
   toolbar:
     - [ 'Bold', 'Italic', 'Underline', '-' ] 
     - [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] 
     - [ 'NumberdList', 'BulletedList', '-', 'Indent', 'Outdent' ] 
     - '/'
     - [ 'HorizontalRule', 'Link', 'RemoveFormat', '-' ] 
     - [ 'Copy', 'Cut', 'Paste', '-' , 'Undo', 'Redo'] 
   extraPlugins: 
     - justify

Erweiterter Inhaltsfilter

• Die konfigurierten Tags, Klassen und Stile bleiben erhalten.
• Es ist möglich, den Inhalt während der Bearbeitung von 'Edits' und 'Pastes' zu filtern.
• Die erweiterten Funktionen des Inhaltsfilters sind standardmäßig aktiviert.

editor:
   config:
     allowedContent: true

TYPO3 + CKEditor Video

Tutorial - Rich Text Editor