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" }