Transferring TYPO3 rte (ckeditor 5) buttons config from tsconfig to yaml

12.06.2024

Paulina Seroczynska

We recommend you to put all configurations for the preset in the YAML configuration. However, it is still possible to override these settings through the page TSconfig. You can find a list of configuration properties in the Page TSconfig reference, chapter RTE.

Source: HTTPS://DOCS.TYPO3.ORG/C/TYPO3/CMS-RTE-CKEDITOR/MAIN/EN-US/CONFIGURATION/REFERENCE.HTML

Unfortunately, I have not found any example YAML configuration on how to transfer existing RTE TSConfig to YAML for the new CKEditor starting from TYPO4 V12. Therefore, here is an example configuration from me.

The goal was specifically to insert a link with button classes from Bootstrap. Inserting multiple classes for a link via the Link Wizard was unfortunately only available from TYPO3 7 through TSConfig. This config no longer worked for me. With the YAML configuration below, I can give a link directly two button classes "btn btn-secondary-cta" and even name it user-friendly in the Link Wizard.

imports:
    - { resource: "EXT:my_base_sitepackage/Configuration/RTE/my_general.yaml" }

editor:
    config:
        contentsCss:
            - 'EXT:my_sitepackage/Resources/Public/CSS/rte.min.css'
        style:
          definitions:
            - { name: "Lead Text", element: "p", classes: ['lead'] }
            - { name: "Colored Box", element: "p", classes: ['bgcolor-green', 'p-3', 'rounded-corners-1'] }
            - { name: "White Box", element: "p", classes: ['bg-white', 'p-3', 'rounded-corners-1'] }
            - { name: "Checklist", element: "ul", classes: ['checklist'] }
            - { name: "Link Download", element: "a", classes: [ 'link-download' ] }
            - { name: "Link Related", element: "a", classes: [ 'link-related' ] }
            - { name: "Primary CTA", element: "a", classes: [ 'btn' , 'btn-primary-cta'] }
            - { name: "Secondary CTA", element: "a", classes: [ 'btn' , 'btn-secondary-cta'] }

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

buttons:
    link:
        properties:
            class:
                allowedClasses: 'link-download, link-related, btn btn-primary-cta, btn btn-secondary-cta'
classes:
    link-download:
        name: 'Link Download'
    link-related:
        name: 'Link Related'
    btn btn-primary-cta:
        name: 'Primary CTA'
    btn btn-secondary-cta:
        name: 'Secondary CTA'

Kategorie 1

Heading

DYNAMYA is your flexible partner. We adjust our capacities to meet your needs, work hand in hand with your in-house team, and provide support where it's truly needed. We offer not only support in web development but also strategic consulting for process optimization.