TYPO3 8 ckeditor stylesSet multiple Classes start Classname with “bg” does not work

Question

I've noticed a strange behavior with the yaml configuration since the TYPO3 update from 8.19 to 8.22 in the section stylesSet with several classes. It does not longer work, if the class name starts with "bg" and if is not defined as the first class.

stylesSet:
  - { name: "bgcolor-pink", element: ['p', 'div'] , attributes: { class: "button bgcolor pink"} }

However, if i put the class "bgcolor" first, then the styleset "bgcolor-pink" is displayed again in the ckeditor and it works.

 stylesSet:
  - { name: "bgcolor-pink", element: ['p', 'div'] , attributes: { class: "bgcolor button pink"} }

I thought maybe this has something to do with stylesheetParser_skipSelectors but could not find clues.

I'm grateful for an answer.

Answer 1

I ran into this problem a while ago as well. After some searching I found out it's a bug in ckeditor. Classes have to be listed alphabetically or it will not work. The problem is that in one part of ckeditor the classes are sorted and then later checked against the original configuration, which isn't sorted. The bug's been known for a while (at least 4 years, see https://dev.ckeditor.com/ticket/13206 ), but doesn't seem to be fixed yet. The only 'fix' right now is to list the classes alphabetically.