TYPO3 12 with CKEditor 5: Styles in a single selection

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