Einfache Schritte zur Konfiguration des CKEditors in TYPO3

Einfache Schritte zur Konfiguration des CKEditors in TYPO3

Vorbei sind die Zeiten, in denen die immer größer werdende TYPO3-Community auf den Einsatz des Rich Text Editor (RTE) und seine mittlerweile veralteten Funktionen vertraute. 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. Hier helfen wir Ihnen, einen schnellen Überblick über die primären Konfigurationsebenen des CKEditor in TYPO3 CMS zu erlangen.

Was ist CKEditor?

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.

Was ist CKEditor?

Quelle: https://www.myhubintranet.com/cms-intranets-make-right-choice/

CKEditor versus TYPO3's htmlArea RTE

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.

AtoZ über TYPO3 v8 CMS

Quelle: https://docs.typo3.org/typo3cms/extensions/jh_magnificpopup/UsersManual/IframeForRte/Index.html

Warum CKEditor in TYPO3 nutzen?

  • Intelligente Inline-Bearbeitungsfunktionen
  • Kompatibilität mit Cross-Browsern und Cross-Geräten
  • Einhaltung verbesserter Web-Zugänglichkeits-Features und Standards
  • Erweiterte Stufen der Inhaltsfilterung sind möglich, etc.

YAML - Das Konfigurations-Dateiformat

Da der CKEditor aus der YAML-Konfiguration besteht, ist es unerlässlich, Vorkenntnisse über YAML-Dateien zu erlangen. Diese Dateien sind grundsätzlich Textdateien mit leicht verständlicher Syntax. Die Strukturierung dieser Dateien ist abhängig von der Platzierung von Einrückungen und Leerzeichen; z.B. werden Sequenzelemente durch Bindestriche gekennzeichnet, während Schlüssel-Wert-Paare durch einen Doppelpunkt getrennt werden.

YAML Beispielcode

# Employee records

- sanjay:

name: Sanjay Chauhan

job: Developer

skills:

- php 

- python

- c

- keval:

name: Keval Pandya

job: Developer 

skills:

- php 

- c++ 

- python 

Standard-Presets im CKEditor von TYPO3

1. Full preset

full preset

2. Minimal preset

Minimal preset

3. Default preset

default preset

Was können diese Presets?

Die Presets sind verantwortlich für das Aussehen des Editors, die darin zulässigen Styles und Tags sowie das Laden/Entladen von Plugins. Sie legen auch die Eigenschaften und Funktionalitäten des Datenbank-Verarbeitungssystems'RTE.proc' fest.

Kann man das CKEditor Preset in TYPO3 konfigurieren?

Ja, die Presets im CKEditor können so konfiguriert werden, dass sie sowohl mit TYPO3 Core als auch mit TYPO3 Extensions funktionieren.

Konfigurieren Sie CKEditor Preset in TYPO3

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

Individuelle Konfigurations-Preset für TYPO3 CKEditor

Ihre Website ist, in sich selbst, einzigartig. Hier sind einige schnelle Schritte, um personalisierte Presets für den CKEditor zu erstellen.

Individuelle Konfigurations-Preset für TYPO3 CKEditor

Quelle: https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic

Schritt 1: YAML definieren

  • Betrachten Sie die Standardkonfigurationen Ihrer YAML-Dateien, indem Sie den angegebenen Pfad eingeben. typo3/sysext/rte_ckeditor/Configuration/RTE
  • Registrieren Sie eine neue Konfiguration unter ext localconf.php Ihrer eigenen Erweiterung. ext localconf.php Ihrer eigenen Erweiterung.
  • Ordnen Sie Ihre CKEditor-Konfiguration gemäß den Anforderungen der für die Konfiguration des CKEditor ausgewählten Preset zu.

Schritt 2: YAML Setup für Ihre Erweiterung

  • Registrieren Sie Ihre RTE-Konfiguration in ext_localconf.php
        $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['Custom_presets'] = 'EXT:site_default/Configuration/PageTSconfig/TceForm/Default.yaml';

Schritt 3: Weisen Sie Ihr Preset dem Standard-CKEditor zu.

  • Weisen Sie Ihre Konfiguration in dem dafür vorgesehenen Preset zu.
       RTE.default.preset = Custom_presets

Aufbau einer RTE YAML Preset-Datei

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

Verwaltung verschiedener Optionen des CKEditors in TYPO3

Verwaltung verschiedener Optionen des CKEditors in TYPO3

Quelle: https://ckeditor.com/blog/CKEditor-4-Skin-Contest-Winner/

1. Formatieren Sie die HTML-Tags:

Formatieren Sie die HTML-Tags, indem Sie die gewünschte Option aus einem Dropdown-Menü auswählen.

editor:
config:
format_tags: "p;h1;h2;h3;h4;h5;pre;address;div"

Formatieren Sie die HTML-Tags

2. Die Symbolleistengruppen

Die Option Symbolleistengruppen hilft Ihnen, das Layout und die Struktur der Symbolleisten im oberen Teil des Editors zu definieren.

editor:
  config:
   toolbarGroups:
     - { name: clipboard, groups: [clipboard, undo] }
     - "/"
     - { name: styles }

Die Symbolleistengruppen

3. Bereitstellung von Styles

Stellen Sie verschiedene Styles zur Verfügung, um Text auf ansprechende Weise zu formatieren und anzupassen. Sie können demnach das Dropdown-Menü "Styles" verwenden.

editor:
config:
stylesSet:
- { name: "quote-style", element: "p", attributes: { class: "quote-style"}}
- { name: "Load More Button", element: "a", attributes: { class: "load-more"}}
- { name: "More Content", element: "div", attributes: { class: "more-content"}}

Bereitstellung von Styles

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

5. contentsCss

Mit der ContentsCSS-Funktion können Sie verschiedene CSS-Stile für die direkte Verwendung und Anzeige im CKEditor definieren.

6. removeButtons

RemoveButtons hilft beim Entfernen einzelner Funktionen und Schaltflächen, die durch den Import von Base.yaml entstehen.

Standard YAML durch den TYPO3 Core

# 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 http://docs.ckeditor.com/#!/api/CKEDITOR.config
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

Migration Ihrer HTMLArea nach CKEditor?

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

<iframe width="100%" height="470" src="https://www.youtube.com/embed/0589lNwFCic" frameborder="0" allowfullscreen></iframe>

Fazit

Die Integration von CKEditor in TYPO3 hat die Art und Weise, wie Backend-Content von Entwicklern, Redakteuren und Endanwendern bearbeitet werden kann, revolutioniert. Genießen Sie die vielen Vorteile der Konfiguration Ihres TYPO3 RTE mit dem CKEditor und merken Sie den Unterschied - sofort.

Wir freuen uns über Ihre Meinung und Ihr Feedback zu diesem Blog; schreiben Sie uns!

 

...

Sanjay Chauhan - TYPO3 Technopreneur

Ein junger Technologie-Enthusiast und Unternehmer. Mit 24 Jahren war er Mitbegründer von NITSAN - einer TYPO3-Agentur in Bhavnagar, Indien. Er ist ein gefragter Vermarkter von NITSAN, akkreditiert mit dem Management von Kundendienstteams, Kooperationen mit Agenturen und Kunden, Projektausführungen und mehr. Ein Tech-Typ im wahrsten Sinne des Wortes, Sanjay ist der eigentliche TYPO3 Guru bei NITSAN.

Hinterlasse einen Kommentar

Diese Webseite nutzt Cookies

Diese Webseite nutzt Cookies zur Verbesserung des Erlebnisses unserer Besucher. Indem Sie weiterhin auf dieser Webseite navigieren, erklären Sie sich mit unserer Verwendung von Cookies einverstanden.