TYPO3 rte (ckeditor 5) buttons config aus der tsconfig in yaml übertragen

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.

Quelle: https://docs.typo3.org/c/typo3/cms-rte-ckeditor/main/en-us/Configuration/Reference.html

 

Leider habe ich keine Beispiel YAML Konfiguration gefunden, wie man bestehende RTE TSConfig in YAML für den neuen CKEditor ab TYPO4 V12 überträgt. Daher hier eine Beispiel-Konfiguration von mir.

Ziel war es insbesondere einen Link mit Button Klassen aus Bootstrap einzufügen. Mehrere Klassen für einen Link über den Link Wizard einzufügen gab es leider erst ab TYPO3 7 über TSConfig. Diese Config hatte bei mir nicht mehr funktioniert. Mit der u.g. YAML Konfiguration kann ich einem Link direkt zwei Button Klassen geben „btn btn-secondary-cta“ und diesen sogar im Link Wizard benutzerfreundlich bennenn.


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'



Facebook Like

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.