Overrides of inline Styles don't work correctly for classes

[n.beekman]

The following style definitions were taken from ticket #7492 and specified in the stylesSet config property:

{name: 'Comic Font', element: 'span', attributes: {'class': 'FontComic'}, overrides: [ { element : 'span', attributes : { 'class' : /^Font(?:Comic|Courier|Times)$/ } } ]},
{name: 'Courier Font', element: 'span', attributes: {'class': 'FontCourier'}, overrides: [ { element : 'span', attributes : { 'class' : /^Font(?:Comic|Courier|Times)$/ } } ]},
{name: 'Times Font', element: 'span', attributes: {'class': 'FontTimes'}, overrides: [ { element : 'span', attributes : { 'class' : /^Font(?:Comic|Courier|Times)$/ } } ]}

When applying one of the styles, all is ok. When trying to select another style all styles are selected. Clicking one of these results in the class being removed altogether. When using font_names and font_style config properties the problem does not occur. However, I have a number of inline styles that need to be applied in a mutual exclusive manner (i.e. only one style may be applied on a span).

I did some searching in the tracker, this issue looks very similar to #7492 which is marked as fixed. However, the associated changeset [6983] was reverted in changeset [7061] due to regression bug #8078. The original issue appears to be broken again, but was never marked as such. I was not sure whether I should reopen that issue or file a new one, so feel free to merge this ticket with #7492.

Version 3.6.1 is a guess and was taken from ticket #8078. Tested with 4.2.0, 4.2.1 and 4.3 Beta.

[Jakub Ś]

This issue has IMHO nothing to do with #7492. This is how editor works and we think such behaviour is correct.

Classes may be used by JavaScript in target document, to get desired behaviour. Classes have may uses and we can't just change them.

If you need to exclude same styles rules please use inline styles. Please have a look at rules below. The First two rules will be added to same word while later two will replace each other because of same inline elements.

	{ name: 'Marker',			element: 'span', attributes: { 'class': 'marker' } },
	{ name: 'Marker2',			element: 'span', attributes: { 'class': 'marker2' } },
	{ name : 'Marker: Yellow'	, element : 'span', styles : { 'background-color' : 'Yellow' } },
	{ name : 'Marker: Green'	, element : 'span', styles : { 'background-color' : 'Lime' } },

NOTE: once style is applied it is best to select whole element by clicking on its name in elements path.