[SOLVED] CKEditor style plugin: mutually exclusive classes

In version 4 of the CKeditor it was possible to define classes as mutually exclusive meaning that selecting one class unset another class of the same “group”.

For example there’s a defined set of classes targetting table cells (<td>), maybe to specify their background color. Currently a user would have to unselect the selected <td>-class before/after selecting a new <td>-class in order to only have one class applied to the element. This is super annoying and cannot be explained to users.

Since this is an issue of CKeditor itself (see 14206), such a feature should be added to its codebase. For the TYPO3 project we could fork CKeditor’s Styles plugin and add that feature for our build of the editor. And of course we should open a MR for CKeditor. But since we cannot rely on this being merged any time soon we should go with our own fork in the meantime.

While we’re at it, other things could be improved too:

  • Creating an overwrite for the default text of the style preview (it’s always “AaBbCcDdEeFfGgHhIiJj”)

Configuration could look like this:

editor:
  config:
    style:
      definitions:
        - { name: "Green cell", element: "td", classes: ['green'], conflictsWith: ['red', 'yellow'], previewText: "Table cell content" }
        - { name: "Red cell", element: "td", classes: ['red'], conflictsWith: ['green', 'yellow'], previewText: "Table cell content" }
        - { name: "Yellow cell", element: "td", classes: ['yellow'], conflictsWith: ['red', 'green'], previewText: "Table cell content" }
        - { name: "Fancy link icon", element: "a", classes: ['fancy'], conflictsWith: ['other'], previewText: "Link text" }
        - { name: "Other link icon", element: "a", classes: ['other'], conflictsWith: ['fancy'], previewText: "Link text" }

Hi @kitzberger!

Welcome to talk.typo3.org!

CKEditor v5 changed the way it deals with classes, and it has engaged a lot of people. I’m not sure shipping TYPO3 with a forked CKEditor is something that would be considered good, but the best next step would be to submit a feature request and see how the idea is received.

Another way would be to supply a patched version CKEditor in a third-party extension.

Hey @kitzberger, thank you for your post. I’ve moved it into the questions category.

Instead of conflictsWith: ['red', 'yellow'] etc I would prefer something like:

mutualExclusiveGroup: 'color'

For all “color” setting so that only one of these can be set.

1 Like

@ischmittis @mabolek I guess Philipp was proposing to implement this missing feature / regression with the help of the TYPO3 budget - wasn’t that the idea of the category Talk “Community Budget Idea”?

Inside the community ideas talks we are collecting ideas to be funded, normally as part of the current running proposal phase. Since this topic was for me a “technical” idea, without any parts of funding, I moved this topic.

@kitzberger if you want to have this idea as part of the current running Budget Ideas Process Call for Community Budget Ideas (Q3/2025), we are happy to support you to write an application and fillout the form needed for a budget idea.