Search code examples
csstypo3typoscriptrte

TYPO3 RTE font/css change according to backend setting (typoscript and RTE initialisation)

I need to make a change to the CSS of the RTE, and actually the whole site. This change should only happen if chosen in the backends constant editor. (I want to allow chinese and the such in special cases)

My question is whether the RTE is initialized before it can read the correct font/css in accordance of the constant?

Solution

  • This answer is relevant for TYPO3 7.6 and v8 branches. I'm not sure what the situation will be on TYPO3 v9.

    The Rich Text Editor (RTE) component is a FormEngine component and FormEngine components work by two patterns:

    • One pattern creates the structures that contain the TCEForms array and all related assets that they require.
    • Another, singular pattern renders that structure and inserts the assets that are required by each component (and for components using the exact same assets, only load them once).

    This means that the RTE is not initialised until quite late (after all structures are created, but before they are rendered - since I am assuming that by "initialised" you mean on the PHP side rather than in the client browser) and you do have the option to read constants and manipulate those structures before they get rendered. And the initialisation you override can indeed depend on TS constants.

    A bit more background info that will be required for your task:

    • In order to manipulate form structures, the current recommended practice is to create a custom FormEngine component and add that as a dependency of the RTE component. This makes your component be called upon every time an RTE gets used (and thus you can affect individual parameters of each field, as well as attach global or ID-specific assets).
    • FormEngine component creation can be a little difficult to grasp at first, so an example will come in handy. This URL shows a custom component added by the Flux extension - it does so by adding a new array entry in the component registry and fit that new entry with dependencies and before/after instructions. https://github.com/FluidTYPO3/flux/blob/development/ext_localconf.php#L85.
    • You can use this same registry manipulation to change dependencies of existing components, adding your own to the list, and specifically targeting the RTE FormEngine component (whose class name is TYPO3\CMS\Rtehtmlarea\Form\Element\RichTextElement - https://github.com/TYPO3/TYPO3.CMS/blob/TYPO3_7-6/typo3/sysext/rtehtmlarea/Classes/Form/Element/RichTextElement.php).

    Hopefully this information is enough to guide you to the perfect solution of adding CSS overrides for any FormEngine component and only trigger it exactly when that type of component gets used.