TYPO3 8.7 CKEditor

Der neue TYPO3 RTE – CKEditor

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

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öchte ich hier näher betrachten.

Schauen Sie doch einmal in die Demo des CKEditors.

Grundkonfiguration des CKEditors

Der CKEditor in TYPO3 bringt 3 vorgefertigte Standard-Konfigurationen (default, full, minimal) mit, welche im PageTSconfig gewählt werden können. Es ist zudem möglich dem RTE bestimmter Datentypen im PageTSconfig andere Konfigurationen zuzuweisen.

// Fügt die Konfiguration "full" allen RTE's hinzu
RTE.default.preset = full

// Fügt die Konfiguration "minimal" dem bodytext von Inhaltselementen des Typs textmedia hinzu
RTE.config.tt_content.bodytext.types.textmedia.preset = minimal 

// Fügt die Konfiguration "default" dem bodytext von News-Datensätzen hinzu
RTE.config.tx_news_domain_model_news.bodytext.preset = default
CKEditor Konfiguration "Default"

CKEditor Konfiguration „Default“

CKEditor Konfiguration "Full"

CKEditor Konfiguration „Full“

CKEditor Konfiguration "Minimal"

CKEditor Konfiguration „Minimal“

Anlegen einer eigenen Konfiguration

In der Regel wird für eine individuelle TYPO3-Einrichtung auch eine individuelle Konfiguration des RTE’s benötigt. 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ält die komplette Konfiguration des CKEditors.

Die YAML-Dateien der Standard-Konfigurationen können unter dem Pfad typo3/sysext/rte_ckeditor/Configuration/RTE eingesehen werden und als Orientierung dienen.

// Individuelle RTE-Konfiguration registrieren in der ext_localconf.php
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['cs_presets'] = 'EXT:cs_templates/Configuration/RTE/CsPresets.yaml';
// Zuweisen der Konfiguration im PageTSconfig
RTE.default.preset = cs_presets

Eine individuelle YAML-Konfiguration kann beispielsweise so aussehen:

# 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:
    contentsCss: "EXT:cs_templates/Resources/Public/Css/editor.css"
    stylesSet:
      - { name: "Rote Schrift", element: "span", attributes: { class: "highlighted red"} }
      - { name: "Button", element: "a", attributes: { class: "button"} }
      - { name: "Checkliste", element: "ul", attributes: { class: "check-list"} }

    format_tags: "p;h2;h3;h4;h5"

    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:
      - Strike
      - Anchor
      - Outdent
      - Indent
      - Blockquote
      - JustifyBlock

Bereich imports

Im ersten Teil der YAML-Datei „imports“ können Konfigurationen des CKEditors von TYPO3 importiert werden. Die Processing.yaml beinhaltet die Anweisungen für 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ügt dem RTE Plugins hinzu, wie den Link-Wizard oder ein Plugin zur Tabellen-Erzeugung.

Bereich editor:config

Im Bereich editor:config befindet sich die eigentliche Konfiguration des CKEditors, also das Hinzufügen bzw. Entfernen von Funktionen.

  • contentsCss:
    Hier kann der Pfad zu einer CSS-Datei angegeben werden, welche für die Ansicht im CKEditor verwendet wird. Hier sollten alle zur Auswahl stehenden CSS-Klassen der Stile enthalten sein, damit der Redakteur diese Stile direkt im CKEditor einsehen kann.
  • stylesSet:
    In diesem Abschnitt können beliebig viele eigene Stile definiert werden. Der Redakteur bekommt somit z.B. die Möglichkeit einem Link die Stile „Button“, „Arrow“ oder „Underlined“ zuzuweisen.

    editor:
      config:
        stylesSet:
          - { name: "Rote Schrift", element: "span", attributes: { class: "highlighted red"} }
          - { name: "Button", element: "a", attributes: { class: "button"} }
          - { name: "Checkliste", element: "ul", attributes: { class: "check-list"} }

    Der Name eines Stils ist der Titel, den der Redakteur im CKEditor zur Auswahl bekommt. Als Element wird das HTML-Element definiert, für welches der Stil angewendet werden kann. Sollen hier mehrere Elemente möglich sein, müssen diese einzeln angelegt werden. Eine Mehrfach-Angabe ist nicht möglich. Zudem können die Attribute definiert werden, die an das Element bei Auswahl des Stils hinzugefügt werden sollen. Dies ist in der Regel die entsprechende CSS-Klasse. Hier können auch mehrere CSS-Klassen angegeben werden.

  • format_tags:
    Definiert die zur Verfügung stehenden Absatzformate wie Absatz, Überschrift 2, Überschrift 3 etc.
  • toolbarGroups:
    Hier können die einzelnen Buttons gruppiert werden. So bleiben Funktionen, die thematisch zusammengehörig sind, immer als Gruppe beisammen. Wird das Backend z.B. in einem kleineren Tablet aufgerufen und der Platz ist nicht ausreichend, so brechen Gruppen um. Ein Umbruch innerhalb einer Gruppe ist aber nicht möglich. Eine typische Gruppe ist z.B. „bold“, „italic“, „underlined“. Zum Erstellen dieser Gruppen hilft der Toolbar Configurator des CKEditors weiter.
  • removeButtons:
    Hier können einzelne Buttons bzw. Funktionen entfernt werden, die z.B. durch den Import der Base.yaml eingefügt wurden. Auch hier hilft der Toolbar Configurator des CKEditors weiter.
  • extraPlugins, removePlugins:
    Durch den CKEditor können auch Plugins eingebunden werden, die den Funktionsumfang des RTE’s erweitern. TYPO3 hat einige Plugins standardmäßig eingebunden (z.B. image, justify, font, find, bidi). Diese können in den Bereichen extraPlugins und removePlugins aktiviert bzw. deaktiviert werden. Nähere Beschreibungen zu den Plugins findet man in der Plugin-Übersicht des CKEditors. Es gibts zudem je nach Plugin die Möglichkeit Konfigurationen für ein Plugin vorzunehmen, wie z.B. der Bereich justifyClasses.

Externe Plugins anbinden

In der Plugin-Übersicht des CKEditors gibt es eine große Auswahl an Plugins zur Erweiterung. Einige davon werden bereits von TYPO3 eingebunden – sofern die Konfiguration von TYPO3 auch in der eigenen Konfiguration importiert wird. Möchte man ein weiteres externes Plugin einfügen, muss dieses in der Extension hinterlegt und der Pfad zu der JS-Datei des Plugins verknüpft werden.

In diesem Beispiel erweitert das Plugin dialogadvtab die Erstellung von Tabellen um weitere Funktionen. So kann der Redakteur einer Tabelle z.B. eine CSS-Klasse hinzufügen.

editor:
  externalPlugins:
    # This is a plugin, found here: https://github.com/ckeditor/ckeditor-dev/tree/master/plugins/dialogadvtab
    dialogadvtab: { resource: "EXT:cs_templates/Resources/Public/JavaScript/RTE_Plugins/dialogadvtab/plugin.js" }

Die erlaubten CSS-Klassen müssen in diesem Beispiel noch der RTE parseFunc im Typoscript hinzugefügt werden.

lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class {
    list = clean
    always = 0
    default =
}

Ob für ein Plugin noch weitere Konfigurationen notwendig sind, kann in der jeweiligen Dokumentation eines Plugins entnommen werden.

Konvertierung von hmtlArea zu CKEditor

Sowohl der alte RTE „htmlArea“ als auch der CKEditor speichern Ihren Code in der Datenbank. Die Konvertierung des HTML-Codes von „htmlArea“ zu CKEditor in der Datenbank übernimmt der Upgrade Wizard von TYPO3 beim Update. Danach ist es wichtig vor dem Öffnen und Speichern eines RTE-Textes im Backend den CKEditor entsprechen den Einstellungen von „htmlArea“ zu konfigurieren. So gehen beim erneuten Speichern von bestehenden Elementen keine Daten verloren.

 

Sie haben Lust tiefer in das Thema TYPO3 8.7 LTS einzusteigen? Wir sind stets auf der Suche nach TYPO3-Entwicklern, schauen Sie doch mal bei unseren Stellenangeboten vorbei.

  • 04/08/2017

    Kommentar von Torsten

    Danke für die tolle Anleitung! Soweit funktioniert alles, aber: gibt es nicht eine andere Möglichkeit, ein eigenes Template für den RTE zur Verfügung zu stellen, außer in der ext_localconf.php der Extension? Was passiert bei einem Update? Ich habe zwar eine Extension gefunden (hh_ckeditor_custom), die EINE eigene Konfiguration einbindet, aber eben nur eine. Bei größeren Projekten benötigt man dann doch mehrere…

    • 07/08/2017

      Kommentar von Angela

      Hallo Torsten, danke für dein Feedback! Gerade bei umfangreichen Projekten würden wir sehr empfehlen eine eigene Extension zu erstellen, in der die Templates und Typoscript-Dateien enthalten sind. Hier können dann auch ohne Probleme mehrere RTE-Konfigurationen in der ext_localconf.php registriert werden. Auch die YAML-Dateien der RTE-Einstellungen können dann in dieser Extension hinterlegt werden.
      Die Vorteile einer solchen Extension sind, dass alle individuellen Konfigurationen des Projekts hier verwaltet sind. So kann man das Projekt auch gut mit Versionsverwaltungen wie git entwickeln. Viele Grüße, Angela

  • 31/10/2017

    Kommentar von Michael

    Hallo Angela,
    Du schreibst wie viele andere auch:
    RTE.tt_content.types.textmedia.bodytext.preset = minimal
    würde das bodytext-feld für den type textmedia einstellen.
    Leider funktioniert das bei mir nicht.
    Hast Du das getestet?
    Gibt es eine offizielle Doku dazu?

    • 01/11/2017

      Kommentar von Angela

      Hallo Michael, danke für den Hinweis, die Zeile funktioniert so in der Tat nicht. Ich habe dies nun im Blog-Beitrag korrigiert. Korrekt lautet die Zeile: RTE.config.tt_content.bodytext.types.textmedia.preset = minimal. Als Orientierung zur Einrichtung des CKEditors kannst du die Beispiel-Konfiguration von Carsten Hager nutzen: https://github.com/CarstenHager/ckeditor_config. Viele Grüße, Angela

  • 06/11/2017

    Kommentar von Kurt Kunig

    html5-tags werden beim Speicerhn immer gelöscht!?
    z.B.:

    Überschrift

    Nach dem Speichern bleibt nur das übrig:
    Überschrift

    Wie kann ich meine config.yaml parametrieren, dass diese Tags komplett akzeptiert werden?
    Nur „editor: config: „extraAllowedContent: ‚figure figcaption article footer header video'“ genügt leider nicht.

    • 09/11/2017

      Kommentar von Angela

      Hallo Kurt, setze die HTML5-Tags ebenfalls in der RTE-Konfiguration in „processing: allowTags:“ ein. Ein Beispiel findest du hier ab Zeile 110: https://github.com/CarstenHager/ckeditor_config/blob/master/Configuration/PageTS/RTE/Default.yaml. Ansonsten prüfe auch, ob die HTML-Tags durch das Typoscript lib.parseFunc_RTE erlaubt sind. Viele Grüße, Angela

  • 24/11/2017

    Kommentar von Zapp

    Super Anleitung, vielen Dank! Ich habe leider ein Problem beim Einbinden der CSS-Datei mit contentsCss. Diese wird zwar korrekt eingebunden, dann aber vom Browser gecached, sodass alle nachträglichen Änderungen nicht mehr greifen. Es wird der ETAG für die Datei geschickt und so bleibt sie dann für längere Zeit aktiv. Das kann man zwar umgehen, wenn man im Firebug den Cache deaktiviert, aber das ist keine sehr schöne Lösung, wenn man Redakteuren neue Styles einpielen möchte. Wie macht Ihr das?

    • 28/11/2017

      Kommentar von Angela

      Hallo, vielen Dank für deinen Kommentar. Ich kann deine Frage gut nachvollziehen, wir haben dazu leider noch keine Erfahrungswerte. Stell deine Frage doch im TYPO3 Slack-Channel (http://www.typo3-probleme.de/tag/slack/). Hier bekommt man schnell einen Hinweis oder Tipp. Viele Grüße, Angela

  • 13/12/2017

    Kommentar von Sven

    Danke für die ausführliche Anleitung. Ich sehe den Wechsel des Editors aber als einen großen Schritt zurück.
    Der Editor bietet die Möglichkeit einem Element nur eine Klasse zuzuweisen. Meine Kunden sind es aber beispielsweise gewohnt, unterschiedliche Klassen für verschiedenste Formatierungen (text-transform, text-color, padding, margin usw.) frei zu kombinieren. Man muss nur mal schauen welche Möglichkeiten das Bootstrap Framework da bietet. Grade die Headline-Klassen sind da SEOtechnisch Gold wert.
    Klar ist es möglich, diese Kombinationen vorher zu definieren aber wieviele 100 Kombinationen sollen denn da hinterlegt sein?

    • 13/12/2017

      Kommentar von Angela

      Vielen Dank für deine Anmerkung. Diese Funktion vermissen wir in der Tat auch in einigen Projekten. Dieses Thema ist beim CKEditor (welcher ja ein externes Tool ist) bereits auf dem Tisch. Wir hoffen, dass es hierbei bald ein Update in diese Richtung gibt. Viele Grüße, Angela

  • 10/01/2018

    Kommentar von Chicky

    Hallo. danke für den Artikel. Wie kann man komplexe Formeln darstellen? Der Button für das Formelwidget lässt sich nicht aktivieren….

    • 11/01/2018

      Kommentar von Angela

      Hallo, leider kann ich dir beim Thema Formeln nicht weiterhelfen. Diese Funktion war noch nie eine Anforderung unserer Webseiten. Vermutlich ist das Formelwidget, welches du nutzt, ein externes Plugin des CKEditors. Hier habe ich die Erfahrung gemacht, dass man auch andere, ähnliche Widgets ausprobieren sollte, da die Widgets nicht immer fehlerfrei sind. Manchmal benötigen solche Plugins zudem noch korrekte Einstellungen, z.B. editor: config: colorButton_enableAutomatic: false um korrekt zu funktionieren. Viele Grüße, Angela

  • 01/08/2018

    Kommentar von Christine

    Hallo, danke für den Artikel, der mir u.a. geholfen hat, meine eigene Konf-Extension für rte_ckeditor zu erstellen.
    Weiß ja nicht, ob ich hier richtig bin, aber ich klammere mich an jeden Strohhalm…
    Ich habe den rte_ckeditor inzwischen schon bei fast 10 Projekten mittels meiner eigenen Konfigurations-Extension zum Laufen gebracht, aber jetzt hänge ich bei einem Projekt total.
    Mein eigenes yaml-file ist wirksam (wenn ich etwas im yaml lösche, wird es mir beim Editieren eines Inhaltselementes auch nicht angezeigt, meine Klassen sind anwählbar) – aber beim Speichern des Inhaltselements verschwinden alle html-tags und Klassen und der gesamte Text befindet sich innerhalb eines einzigen Text – Absatzes. Also die Persistierung funktioniert nicht! Ich habe mein gesamtes Typoscript schon auf störende Statements durchsucht, finde aber nichts.
    Vielleicht hat jemand mit mehr Erfahrung eine Idee? Wäre toll! Danke

    • 02/08/2018

      Kommentar von Angela

      Hallo Christine, es freut mich, dass der Blog-Beitrag dir schon etwas weitergeholfen hat. Dein beschriebenes Problem scheint nicht direkt ein Problem des CKEditors zu sein. Hast du schon einmal geprüft, ob in dem Projekt die lib.parseFunc_RTE existiert? Diese solltest du in deinem TS-Template finden. Im Backend im TypoScript-Objekt-Browser solltest du bei Setup fündig werden. Diese Lib kümmert sich um die Zulassung des HTMLs in der Datenbank. Zudem kannst du ebenfalls in dem Modul über die Template-Analyse prüfen, ob das komplette TS eingelesen wird oder es irgendwo zu Fehlern kommt. Ich hoffe ich kann dir hiermit schon weiterhelfen. Viele Grüße, Angela

  • 02/08/2018

    Kommentar von Christine

    Hallo Angela, danke für die schnelle Antwort! Ja, diese lib.parseFunc_RTE hatte ich auch schon im Visier, erkenne aber keinen Fehler! So sieht sie aus (Kopie aus Template Analyse, wo ich auch sonst keine Fehler sehe):

    250: lib.parseFunc_RTE < lib.parseFunc
    251: lib.parseFunc_RTE {
    252: # Processing , and blocks separately
    253: externalBlocks = article, aside, blockquote, div, dd, dl, footer, header, nav, ol, section, table, ul, pre
    254: externalBlocks {
    255: ol {
    256: stripNL = 1
    257: stdWrap.parseFunc = < lib.parseFunc
    258: }
    259: ul {
    260: stripNL = 1
    261: stdWrap.parseFunc = < lib.parseFunc
    262: }
    263: pre {
    264: stdWrap.parseFunc < lib.parseFunc
    265: }
    266: table {
    267: stripNL = 1
    268: stdWrap {
    269: HTMLparser = 1
    270: HTMLparser {
    271: tags.table.fixAttrib.class {
    272: default = contenttable
    273: always = 1
    274: list = contenttable
    275: }
    276: keepNonMatchedTags = 1
    277: }
    278: }
    279: HTMLtableCells = 1
    280: HTMLtableCells {
    281: # Recursive call to self but without wrapping non-wrapped cell content
    282: default.stdWrap {
    283: parseFunc = < lib.parseFunc_RTE
    284: parseFunc.nonTypoTagStdWrap.encapsLines.nonWrappedTag =
    285: }
    286: addChr10BetweenParagraphs = 1
    287: }
    288: }
    289: div {
    290: stripNL = 1
    291: callRecursive = 1
    292: }
    293: article < .div
    294: aside < .div
    295: blockquote < .div
    296: footer < .div
    297: header < .div
    298: nav < .div
    299: section < .div
    300: dl < .div
    301: dd < .div
    302: }
    303: nonTypoTagStdWrap {
    304: encapsLines {
    305: encapsTagList = p,pre,h1,h2,h3,h4,h5,h6,hr,dt
    306: remapTag.DIV = P
    307: nonWrappedTag = P
    308: innerStdWrap_all.ifBlank =  
    309: }
    310: }
    311: nonTypoTagStdWrap {
    312: HTMLparser = 1
    313: HTMLparser {
    314: keepNonMatchedTags = 1
    315: htmlSpecialChars = 2
    316: }
    317: }
    318: }

    Wäre soo dankbar für eine Idee!!
    Viele Grüße
    Christine

    • 02/08/2018

      Kommentar von Angela

      Hallo Christine, vergleiche die lib.parsefunc_RTE mal bitte mit deinen funktionierenden Projekten. In deinem Code fehlt z.B. der Punkt .allowTags, ggf. ist diese lib.parsefunc_RTE veraltet? Viele Grüße, Angela

  • 02/08/2018

    Kommentar von Christine

    Hallo Angela,
    danke für Deine wieder superschnelle Antwort.
    Ich habe das genau verglichen. Ist alles vollkommen identisch zwischen meinem Fehler-Projekt und einem funktionierenden upgegradeten Projekt der selben „Baureihe“, wenn ich die Template Analyse anschaue.
    .allowTags solle vorhanden sein:

    In EXT:fluid_styled_content/Configuration/TypoScript/ steht:
    ganz oben:
    styles.content.allowTags = a, abbr….p,h2…usw
    weiter unten:
    lib.parseFunc.allowTags = {$styles.content.allowTags}
    noch weiter unten:
    lib.parseFunc_RTE < lib.parseFunc
    und weitere Einstellungen für lib.parseFunc, da wird aber allowTags nicht überschrieben

    Im TOB sieht man es auch:

    [parseFunc_RTE]

    [makelinks] = 1

    [http]

    [mailto]

    [tags]

    [link] = TEXT
    [a] = TEXT

    [current] = 1

    [typolink]

    [parameter]
    [title]
    [ATagParams]
    [target]

    [extTarget] = _blank

    [allowTags] = a, abbr, acronym, address, article, aside, b, bdo, bi…
    [denyTags] = *
    [sword] = |
    [constants] = 1
    [nonTypoTagStdWrap]

    -> Also sollte allowTags gefüllt sein (funktioniert ja bei den anderen Projekten auch, seufz…)
    Ich werde immer ratloser…
    Ich habe auch einmal versucht, alle potentiell störenden local Extensions zu deaktivieren -> ohne Erfolg
    Fällt Dir noch was ein? Danke…

    • 02/08/2018

      Kommentar von Angela

      Hallo Christine, du könntest zum Test einmal alle lib.parseFunc’s im TS entfernen bzw. löschen und nachsehen, was dann passiert. So kannst du ausschließen, dass es an den lib.parseFunc’s liegt. Viele Grüße, Angela

  • 03/08/2018

    Kommentar von Christine

    Hallo Angela,
    danke für Deine Antwort.
    Ich habe im Root TS Template hinten reingeschrieben:
    #——————–Test ck_edit
    lib.parseFunc_RTE >
    lib.parseFunc >
    Das war auch wirksam; im TOB findet man unter libs die beiden libs nicht mehr.
    Der Fehler bleibt leider!
    Es ist wie verhext.
    Etwas, was im Quelltext so aussieht:
    Test  
     
    rechts
    sieht nach dem Speichern so aus:
    Test   rechts
    Bin nach wie vor ratlos…
    Noch eine Idee? Danke…

  • 04/08/2018

    Kommentar von Christine

    Hallo Angela, danke für Deine Hilfe.
    Ich habe trotzdem jetzt vorläufig aufgegeben. Ich bin für dieses Projekt jetzt auf rtehtmlarea zurück gegangen. Ich stelle das Problem auf http://www.typo3-probleme.de/tag/slack/
    Viele Grüße
    Christine

    • 06/08/2018

      Kommentar von Angela

      Hallo Christine, das ist eine gute Idee. Dort findest du sicher schnell eine Antwort. Viele Grüße, Angela

  • 13/08/2018

    Kommentar von Andi

    Vielen Dank für den informativen Artikel.

    Ich habe in den Kommentaren oben gelesen, dass bei Versionsupdates die ext_localconf.php der Extension rte_ckeditor ja überschrieben wird. Das Problem hatte ich nun schon ein paar mal, bin erst nach ein paar mal dahinter gestiegen, dass die aktivierten Auto-Updates von Typo3 immer wieder diese Konfigurtion zurücksetzen und dann der RTE nicht mehr angezeigt wurde.

    Warum ich schreibe: Ich finde es total unausgegoren, die Konfiguration des RTE erst mit einer eigenen Extension updatefähig zu bekommen. Hier hätte das Entwickler-Team schon eine bessere Möglichkeit von der ersten Stunde an bringen müssen, oder? Es kann doch nicht sein, dass eine Funktionalität, die die meisten sicher benötigen für ihre Projekte, nur mit einer zusätzlichen, eigens programmierten Extension funktioniert.

    • 14/08/2018

      Kommentar von Angela

      Hallo Andi, danke für dein Feedback.

      Man sollte generell keine Dateien innerhalb des „typo3“-Ordners ändern, da diese bei jedem kleinen TYPO3-Update ausgetauscht werden. Das gleiche gilt auch für externe Extensions wie powermail oder news. Auch die Extension-Ordner im „ext“-Verzeichnis werden bei einem Extension-Update ausgetauscht. Die Änderungen sind dann weg, was sehr schmerzhaft sein kann. Daher ist das Einbinden einer eigenen Extension, die die nötigen Anpassungen enthält, die langfristig sicherste Möglichkeit. Damit gehen bei Updates definitiv keine Anpassungen verloren.

      Das Anlegen einer eigenen Extension ist grundsätzlich nicht sehr kompliziert. Wenn du nur die RTE-Konfiguration in der eigenen Extension einsetzen willst, reichen wenige Dateien, um die Extension einzubinden. Am leichtesten geht dies mit dem Extension Builder (https://extensions.typo3.org/extension/extension_builder/). Wie du diesen nutzt, kannst du im Manual des Extension Builders nachlesen. Eine schöne Anleitung findest du zudem hier: https://www.programmier-tipps.de/2017/07/07/eine-eigene-typo3-extension-extbasefluid-mit-system-kategorien-erstellen-teil-1/. Wenn du nur eine Extension für deine RTE-Konfiguration benötigst, brauchst du im Extension Builder kein Datenmodell einsetzen und bist damit nach den Grundangaben schon startklar.

      Ich hoffe ich konnte dir weiterhelfen.

      Viele Grüße, Angela

  • 07/02/2019

    Kommentar von Armin

    Danke für den Artikel.

    Ich habe den ckeditor nun mal mit der Typo3 9er Version getestet. Funktioniert eigentlich super, bis auf ein Problem: Ich habe eine custom yaml File eingebunden. Ich habe den Bereich stylesSet mit eigenen Styles umgeschrieben, aber auch mit der Einstellung RTE.default.preset = full habe ich das Problem. Und zwar funktionieren die Select Listen, wie Styles und Heading erst ab dem 3. Klick ca. Wenn es dann mal funktioniert, dann geht es auch, nach dem Reload aber wieder das gleiche Spiel.

    Habt ihr hiermit schon Erfahrungen?

    • 07/02/2019

      Kommentar von Andreas

      Hallo Armin, vielen Dank für deine Anfrage. Wir arbeiten auch schon mit TYPO3 9.5 LTS und können den beschriebenen Fehler nicht reproduzieren. Ich habe es auch mit der Einstellung RTE.default.preset = full probiert und hatte damit keine Probleme. Hast du es schon mit einem anderen Browser probiert? Viele Grüße, Andreas.

  • 07/02/2019

    Kommentar von Armin

    Hallo Andreas,

    ja ich habe es in mehreren Browser probiert und immer den gleichen Fehler bekommen. In den Entwickler Tools vom Chrome werden mir auch Console Errors angezeigt. Und diese Errors kommen immer nur sobald ein RTE im Spiel ist.

    Refused to apply style from ‚https://meine-domain.de/typo3/index.php?route=%2Fmain&token=7b8fcc5838e195c1abd22905ea7c944e14722002‘ because its MIME type (‚text/html‘) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

    Vielleicht hilft das ja weiter.

    • 07/02/2019

      Kommentar von Andreas

      Hallo Armin, diesen Fehler hatten wir noch nicht. Nach einer Suche im Internet dazu gibt es ein paar Hinweise, dass der Fehler aus deiner CSS-Datei kommen könnte. Alternativ könnte es ein serverseitiges Problem sein. Hast du im Intstall-Tool einmal den Server getestet, bzw. ist hier alles fehlerfrei eingerichtet? Viele Grüße, Andreas.

  • 07/02/2019

    Kommentar von Armin

    Hallo Andreas,

    im Install-Tool ist alles in Ordnung. Ich werde mich mal nach dem Fehler umschauen und ggf. hier posten, wenn ich eine Lösung gefunden habe, danke!

  • 06/06/2019

    Kommentar von Knut

    Ich finde eine eigene Extension für die Anpassung der Konfiguration auch etwas zu viel. Diese Lösung, das ganze updatefähig in der AdditionalConfiguration.php zu erledigen, ist sicher das was Nutzer „Andi“ gesucht hat. Infos habe ich hier gefunden (ich habe nichts mit der Seite zu tun, habe aktuell nur nach genau diesem Problem Konfiguration ohne Extension gesucht:. http://www.typo3-probleme.de/2017/10/09/typo3-ckeditor-ohne-eigene-extension-bearbeiten-2160/

    Hiergegen spricht doch eigentlich nichts, oder?

    • 07/06/2019

      Kommentar von Angela

      Hallo Knut, danke für den Link. Gegen diese Lösung spricht technisch gesehen nichts. Eine eigene Extension bietet allerdings viele Vorteile in den Abläufen der Wartung einer TYPO3-Seite, weshalb wir diesen Weg vorziehen und auch empfehlen würden. Allerdings kann man auch den Weg der Lösung mit der AdditionalConfiguration.php gehen, wenn man keine eigene Extension zur Hand hat.

      Viele Grüße,
      Angela

  • 20/04/2020

    Kommentar von Perseida

    Hallo eine kleine Frage – müsste der RTE nicht einfach so funktionieren, wenn ich ein Feld mit

    ‚title‘ => [
    ‚label‘ => ‚LLL:EXT:myExt/Resources/Private/Language/domain_model.xlf:tx_myext_domain_model_item.title‘,
    ‚config‘ => [
    ‚type‘ => ‚text‘,
    ‚enableRichtext‘ => true,
    ],
    ],

    in der TCA registriere? Bei mir erscheint im Formular aber nur ein Text-Area Feld kein RTE Feld. Muss ich noch irgendwo was extra konfigurieren?

    • 21/04/2020

      Kommentar von Angela

      Hallo Perseida,

      es muss natürlich zudem die Extension „rte_ckeditor“ installiert sein. Abgesehen davon gibt es ein paar Einstellungsmöglichkeiten z.B. in den Benutzer-Einstellungen, wo man den RTE deaktivieren kann. Diese Stellen sind aber standardmäßig aktiviert.

      Viele Grüße,
      Angela

  • 14/05/2020

    Kommentar von Kobi Kobsen

    Hattet ihr schon mal das folgende Problem oder einen Lösungs-Tip? T3 Update von 7 auf 8 auf 9 und jetzt verlinken in der Fremdsprache alle Links die im RTE erstellt wurden auf die Standard-Sprache. Ansonsten funktioniert die Seite problemlos. Man kann in der Fremdsprache über das normale Menü navigieren. Lediglich die RTE Links arbeiten nicht lokalisiert.

    • 18/05/2020

      Kommentar von Angela

      Hallo Kobi, dein beschriebenes Problem hatten wir bisher noch nicht bei den Updates. Sind die alten Links im RTE denn wie gewohnt auf die UID der Standardsprache gesetzt? Viel Erfolg bei deinem Problem. Viele Grüße, Angela

  • 18/09/2022

    Kommentar von Stefan

    Endlich die Erklärung!

    Wahnsinn Tutorial. Merci!

Kommentar hinzufügen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert