Using CSS for RTE in TYPO3 backend

[rvock]

Currently it's not possible to use CSS files generated by TYPO3 Encore as files for RTE.

The CSS for RTE is configured in Yaml-Files:

editor:
  config:
    # Include custom CSS
    contentsCss: "EXT:my_extension/Resources/Public/Css/rte.css"

TYPO3 Documentation for RTE ckeditor Documentation regarding contentsCss

I would expect, that I can use typo3_encore:rte for the entrypoint rte. But this is not changed/processed by TYPO3 Encore.

I am not sure, if this is a bug or a feature request, because TYPO3 Encore should not be used for RTE CSS.

If it should work, I think the best way is to add a Form Data Provider, which changes the contentsCss value:

// ext_localconf.php
$GLOBALS['TYPO3_CONF_VARS']['SYS']['formEngine']['formDataGroup']['tcaDatabaseRecord'][\Vendor\Example\Form\FormDataProvider\RichtextEncoreConfiguration::class] = [
    'depends' => [
        \TYPO3\CMS\Backend\Form\FormDataProvider\TcaText::class,
    ],
];

The DataProvider could look like this:

<?php
declare(strict_types = 1);

namespace Vendor\Example\Form\FormDataProvider;

use Ssch\Typo3Encore\Asset\EntrypointLookupCollectionInterface;
use Ssch\Typo3Encore\Asset\EntrypointLookupInterface;
use TYPO3\CMS\Backend\Form\FormDataProviderInterface;
use TYPO3\CMS\Core\Utility\GeneralUtility;

/**
 * Convert typo3_encore for contentCss
 */
class RichtextEncoreConfiguration implements FormDataProviderInterface {

    public function __construct(EntrypointLookupCollectionInterface $entrypointLookupCollection) {
        $this->entrypointLookupCollection = $entrypointLookupCollection;
    }

    /**
     * @param array $result Given result array
     * @return array Modified result array
     */
    public function addData(array $result): array {
        foreach ($result['processedTca']['columns'] as $fieldName => $fieldConfig) {
            if (empty($fieldConfig['config']['type']) || $fieldConfig['config']['type'] !== 'text') {
                continue;
            }

            if (!isset($fieldConfig['config']['enableRichtext']) || (bool)$fieldConfig['config']['enableRichtext'] !== true) {
                continue;
            }

            $rteConfiguration = $fieldConfig['config']['richtextConfiguration'];

            // replace contentsCss with correct path
            if ($rteConfiguration['editor']['config']['contentsCss']) {
                $contentsCss = $rteConfiguration['editor']['config']['contentsCss'];
                if (str_starts_with($contentsCss, 'typo3_encore:')) {
                    // strip prefix
                    $contentsCss = substr($contentsCss, strlen('typo3_encore:'));
                    [$buildName, $entryName] = GeneralUtility::trimExplode(':', $contentsCss, true, 2);
                    if (!$entryName) {
                        $entryName = $buildName;
                        $buildName = EntrypointLookupInterface::DEFAULT_BUILD;
                    }

                    $entryPointLookup = $this->entrypointLookupCollection->getEntrypointLookup($buildName);
                    $contentsCss = $entryPointLookup->getCssFiles($entryName);
                    $result['processedTca']['columns'][$fieldName]['config']['richtextConfiguration']['editor']['config']['contentsCss'] = $contentsCss;
                }
            }
        }

        return $result;
    }
}

[sabbelasichon]

@rvock I would say, i have never needed it. But i would be happy if you could provide a feature PR for that.

[sabbelasichon]

@rvock I have basically copy and paste your suggestion. Well done. Works like a charm. I am gonna create a PR for that and will merge it. Thanks a lot.

[rvock]

Thanks a lot 👍