Contact us

For coders TYPO3 Tech Corner

TYPO3 12 with CKEditor 5: Styles in a single selection

TYPO3 12 with CKEditor 5: Styles in a single selection

If you set a link in the RTE in TYPO3, you may have to choose between different link classes, for example to create buttons in the frontend. What's new in TYPO3 12 is that you can select not just one style but several styles at the same time. We'll show you how to prevent this with a CSS workaround.

Of course, you can set styles not only for links, but for all defined tags in the YAML configuration. In this configuration file, you can use the contentsCss key to load your own CSS file for the backend.

editor:
  config:
    contentsCss: ["EXT:sitepackage/Resources/Public/Css/Backend/CKeditor.css"]

For example, it could look like this:

#EditDocumentController [id*='data_tt_content__'] {
  .ck-style-grid:has(.ck-on) .ck-off {
    pointer-events: none;
    opacity: 0.5;
  }
}

This will deactivate all other options as soon as a style has been selected. This is not necessarily ideal, as you first have to deactivate an assigned class if you want to assign another class. Nevertheless, this workaround helps some users.

By the way: The enclosing wrapper #EditDocumentController is not absolutely necessary, but can help you if you want to override classes with your CSS that have already been set by TYPO3.

Note: If you are interested in a clean solution, you can upvote the official ticket: https://github.com/ckeditor/ckeditor5/issues/14206

Back

"Code faster, look at the time" - does this sound familiar to you?

How about time and respect for code quality? Working in a team? Automated tests?

Join us