typo3typoscriptrte

TYPO3 RTE - allowedClasses is TSconfig have no effect

I'm using TYPO v12.4. On a specific page of my website when I edit the "Page TSconfig" field with just one line:

RTE.default.proc.allowedClasses := addToList(custom, rowmax25, btn, btn-sm)

But this doesn't have any effect: when I add a class (ex: <p class="custom">) and I save, the class attribute is always removed from the paragraph. I don't understand what I'm doing wrong.

My config seems to be active on the page:

enter image description here

Am I missing something here? I read the documentation but I can't find anything that can help me further.

Solution

  • It's recommended to use the YAML configuration to configure the RTE.
    https://docs.typo3.org/c/typo3/cms-rte-ckeditor/main/en-us/Configuration/Reference.html#page-tsconfig

    Best way is to copy following file to your sitepackage:
    Copy:
    vendor/typo3/cms-rte-ckeditor/Configuration/RTE/Default.yaml
    To:
    EXT:your_sitepackage/Configuration/RTE/Default.yaml

    And then add the config in:
    EXT:your_sitepackage/ext_localconf.php

    $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['default'] = 'EXT:your_sitepackage/Configuration/RTE/Default.yaml';

    In the Default.yaml file you have the following section:

    editor:
  config:
    contentsCss: 'EXT:your_sitpackage/Resources/Public/Css/rte.css'

    style:
      definitions:
        - { name: "Custom", element: "p", classes: [ 'custom' ] }
        - { name: "Rowmax25", element: "small", classes: [ 'rowmax25' ] }
        - { name: "Btn", element: "span", classes: [ 'btn' ] }

    There you can add your custom style classes. And also some css to style the text in the RTE.

    For more information read:
    https://docs.typo3.org/c/typo3/cms-rte-ckeditor/main/en-us/Configuration/QuickStart.html#configuration-quickstart

    EDIT 1:
    Let's assume you want to have the possibilty to add a class to a table, like you described in your first comment. Then you just need to add following to the style definitions:

    editor:
  config:
    style:
      definitions:
        - { element: 'table', classes: ['my-custom-class'] }

    Now you can add class="my-custom-class" to a table-tag. When not adding a name to the definition, it will not show up in the style dropdown.

    EDIT 2:
    The EXT:fluid_styled_content comes with an HTML parser, that renders the classes for tables.
    EXT:fluid_styled_content/Configuration/TypoScript/Helper/ParseFunc.typoscript

    So in order to get your custom class rendered in the table-tag, you must add following to your TypoScript setup:

    lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list = contenttable, my-custom-class

    Now the class should be rendered as set in the RTE.