TYPO3 CKEditor RTE configuration

Question

I've just updated my site from TYPO3 8.5.1 to TYPO3 8.7.7 and it looks like this version add a new RTE called 'CkEditor Rich Text Editor' (extension key rte_ckeditor). I need to configure the editor to allow backend users to add style to there texts, like add paragraph with classes or things like that.

I found this tutorial, which explain how to do that:

https://typo3worx.eu/2017/02/configure-ckeditor-in-typo3/ .

I first tried to change the default preset of the editor with this line : RTE.default.preset = full on the Page TS Config of one of my pages, but I don't see any differences. It looks like my extension don't want to be configured.

Then, I tried to create my own preset to add my own classes etc... From what I understood, I have 2 choices :

Create an extension just for that
Use an existing extension to insert my Yaml file

I tried the 2nd option but again it doesn't change anything when I change the preset in the Page TS Config...

Does anyone know why this is happening and how to solve it?

Any suggestions would be most welcome.

I am using CKEditor extension 8.7.7.

Any news on that? Did you solve that? Having the same issues. It seems to load my YAML file because it showed up some syntax errors.. but after I solved them nothing changed in my backend RTE form. Also setting some other presets do not change anything. — Kevin Lieser

Mario Wilhelm Mario Wilhelm · Accepted Answer · 2019-11-18T14:37:38

In your own extension:

Add in ext_localconf.php

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['[your_ext_key]'] = 'EXT:[your_ext_key]/Configuration/Yaml/rte_ckeditor/Custom.yaml';

In this folder add a file: Custom.yaml

We have the following configuration in the Custom.yaml:

# 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:
    # enable spellchecker
    defaultContentLanguage: "de"
    defaultLanguage: "de"
    contentsLanguage: "de"
    language: "de"
    scayt_autoStartup: true
    scayt_sLang: "de_DE"
    wsc_lang: "de_DE"
    # can be "default", but a custom stylesSet can be defined here, which fits TYPO3 best.
    contentsCss: "EXT:[your_ext_key]/Resources/Public/Css/Extensions/rte_ckeditor/ckeditor.min.css"
    height: "500px"
    resize_enabled: true
    uiColor: "#EEEEEE"
    #toolbarCanCollapse: true
    # Samples for configuration
    stylesSet:
    # block level styles
    #- { name: "Beispiel H2", element: "h2", styles: { color: "orange", background: "blue" } }
    - { name: "Button (primary)", element: "a", attributes: { class: "btn btn-primary" } }
    - { name: "Link mit Pfeil", element: "a", attributes: { class: "linkpfeil" } }
    - { name: "PDF-Download", element: "a", attributes: { class: "download-pdf" } }

    # Inline styles
    #- { name: "Icon: Telefon", element: "span", styles: { color: "telefon" } }

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

    toolbarGroups:
      - { name: document,  groups: [ mode ] }
      - { name: clipboard, groups: [ clipboard, undo ] }
      - { name: editing,   groups: [ spellchecker ] }
      - { name: insert }
      - { name: tools }
      - { name: others }
      - "/"
      - { name: styles }
      - { name: basicstyles, groups: [ basicstyles, align, cleanup ] }
      - { name: paragraph,   groups: [ list, indent, align, blocks ] }
      - { name: links }

    justifyClasses:
      - align-left
      - align-center
      - align-right
      - align-justify

    extraPlugins:
      - justify

    removePlugins:
      - image

    removeButtons:
      - Anchor
      - Underline
      - JustifyBlock
      - Table

# Allow s and u tag
processing:
  allowTags:
    - s

In the file: Configuration/TSConfig/Page/RTE.tsconfig

RTE.default.preset = [your_ext_key]

TYPO3 CKEditor RTE configuration

2 Answers