One style with a class + another with two classes which one is used be the first style, then both are selected in style combo menu.

[masterdjon]

Steps to reproduce ¶

1. Create two styles that both applies to the same elements (well in fact, it seems the problem maybe only related to the "image2" plugin. I can say so, because I have the same stuff for "table" element)
2. One with one class. In example : fullWidth
3. Second with two classes which one is the same as the first style.
4. In the editor, add an image element that you set the style "Styles_Base_FullWidthWithoutLeftMargin"

Styles.js Example ¶

    	{
    		name: $l('Styles_Base_FullWidthWithMargin'),
     		type: 'widget',
     		widget: 'image',
    		attributes: { 'class' : 'fullWidth' }
    	},
    	{
    		name: $l('Styles_Base_FullWidthWithoutLeftMargin'),
     		type: 'widget',
     		widget: 'image',
    		attributes: { 'class' : 'fullWidth outSectionBodyLeft' }
    	}

HTML example ¶

<p>
	<span tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1"
		data-cke-filter="off"
		class="cke_widget_wrapper cke_widget_inline cke_image_nocaption"
		data-cke-display-name="image" data-cke-widget-id="0" role="region"
		aria-label="Élément  image"><img alt="" height="500"
		data-cke-saved-src="IMAGE_URL_REMOVED" src="IMAGE_URL_REMOVED"
		width="1500" class="cke_widget_element outSectionBody fullWidth"
		data-cke-widget-data="%7B%22hasCaption%22%3Afalse%2C%22src%22%3A%22IMAGE_URL_REMOVED%22%2C%22alt%22%3A%22%22%2C%22width%22%3A%221500%22%2C%22height%22%3A%22500%22%2C%22lock%22%3Atrue%2C%22align%22%3A%22none%22%2C%22classes%22%3A%7B%22outSectionBody%22%3A1%2C%22fullWidth%22%3A1%7D%7D"
		data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0"
		data-widget="image"><span
		class="cke_reset cke_widget_drag_handler_container"
		style="background: url(&quot;URL_REMOVED/ckeditor/plugins/widget/images/handle.png&quot;) rgba(220, 220, 220, 0.498039); top: -15px; left: -20px; display: block;"><img
			class="cke_reset cke_widget_drag_handler"
			data-cke-widget-drag-handler="1"
			src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="
			width="15" title="Cliquer et glisser pour déplacer" height="15"
			role="presentation" draggable="true"></span><span
		class="cke_image_resizer"
		title="Cliquer et glisser pour redimensionner">&#8203;</span></span>
</p>

Expected result ¶

Reopening the style combo show only the second style selected, not the first.

Actual result ¶

Reopening the style combo show both styles selected.

Fix ¶

This could resolved by looking at the classes in the combo that search via a regex which is set to full word. I didn't look the code, but as I saw in other issues, it seems that the editor splits the classes using a space to find the correlated style.

Other details (browser, OS, CKEditor version, installed plugins) ¶

Not relevant except for the image2 plugin installed. Though, just saying the "$l" function is just a translating function of my own.

[Jakub Ś]

Yes, you are right - I have tried using same classes for tables and widgets. in case of widgets both classes are selected in dropdown when you aplly just Styles_Base_FullWidthWithoutLeftMargin. In tables only second class is selected.