Hi all,
I have defined a bunch of custom styles through the stylesSet option. When selecting a style for an element, the default behaviour is to remove all existing classes, and add the classes just for the style.
Is there any way to specify if some styles are not mutually exclusive, which would cause CKEditor to simply append the classnames rather than overwriting?
For example, here's a snippet of my styles:
/*
* Buttons
*/
{ name: 'Button: UA', element: 'a', attributes: {'class': 'btn btn-ua'}},
{ name: 'Button: UA Primary', element: 'a', attributes: {'class': 'btn btn-ua-primary'}},
{ name: 'Button: UA Highlight', element: 'a', attributes: {'class': 'btn btn-ua-highlight'}},
{ name: 'Button', element: 'a', attributes: {'class': 'btn'}},
{ name: 'Button: Info', element: 'a', attributes: {'class': 'btn btn-info'}},
{ name: 'Button: Primary', element: 'a', attributes: {'class': 'btn btn-primary'}},
{ name: 'Button: Success', element: 'a', attributes: {'class': 'btn btn-success'}},
{ name: 'Button: Warning', element: 'a', attributes: {'class': 'btn btn-warning'}},
{ name: 'Button: Danger', element: 'a', attributes: {'class': 'btn btn-danger'}},
/*
* Bordered images / Thumbnails
*/
{ name: 'Thumbnail', element: 'img', attributes: { 'class': 'img-thumbnail' } },
{ name: 'Rounded', element: 'img', attributes: { 'class': 'img-rounded' } },
{ name: 'Circle', element: 'img', attributes: { 'class': 'img-circle' } },
/*
* Image positioning
*/
{ name: 'Image left', element: 'img', attributes: { 'class': 'img-left' }},
{ name: 'Image left top', element: 'img', attributes: { 'class': 'img-left img-top' }},
{ name: 'Image right', element: 'img', attributes: { 'class': 'img-right' }},
{ name: 'Image right top', element: 'img', attributes: { 'class': 'img-right img-top' }},
I would like the Button styles to be exclusive - an element can only be one type of button. However, I would like the image styles to be non-exclusive - an element can be both a Thumbnail and Image left
I realize I can use the "styles" property rather than "class" to accomplish what I want, but inlining CSS doesn't seem that clean and I'd like to avoid it if possible.