CKEditor classes to multiple block elements - ckeditor

Question

In CKEditor I need to be able to add the classes .h1, .h2, .h3 ... to my headers, to render them as those different sizes.
Example:
<h1 class="h3">h1 shown at same size as h3</h1>
I could add the following to my stylesSet, which seems pretty verbose:
config.stylesSet = [
// Headers as h1
{ name: 'h2 as h1', element : 'h2', attributes: {'class': 'h1'} },
{ name: 'h3 as h1', element : 'h3', attributes: {'class': 'h1'} },
{ name: 'h4 as h1', element : 'h4', attributes: {'class': 'h1'} },
{ name: 'h5 as h1', element : 'h5', attributes: {'class': 'h1'} },
{ name: 'h6 as h1', element : 'h6', attributes: {'class': 'h1'} },
// Headers as h2
{ name: 'h1 as h2', element : 'h1', attributes: {'class': 'h2'} },
{ name: 'h3 as h2', element : 'h3', attributes: {'class': 'h2'} },
{ name: 'h4 as h2', element : 'h4', attributes: {'class': 'h2'} },
{ name: 'h5 as h2', element : 'h5', attributes: {'class': 'h2'} },
{ name: 'h6 as h2', element : 'h6', attributes: {'class': 'h2'} },
// Headers as h3
{ name: 'h1 as h3', element : 'h1', attributes: {'class': 'h3'} },
{ name: 'h2 as h3', element : 'h2', attributes: {'class': 'h3'} },
{ name: 'h4 as h3', element : 'h4', attributes: {'class': 'h3'} },
{ name: 'h5 as h3', element : 'h5', attributes: {'class': 'h3'} },
{ name: 'h6 as h3', element : 'h6', attributes: {'class': 'h3'} },
// Headers as h4
{ name: 'h1 as h4', element : 'h1', attributes: {'class': 'h4'} },
{ name: 'h2 as h4', element : 'h2', attributes: {'class': 'h4'} },
{ name: 'h3 as h4', element : 'h3', attributes: {'class': 'h4'} },
{ name: 'h5 as h4', element : 'h5', attributes: {'class': 'h4'} },
{ name: 'h6 as h4', element : 'h6', attributes: {'class': 'h4'} },
// Headers as h5
{ name: 'h1 as h5', element : 'h1', attributes: {'class': 'h5'} },
{ name: 'h2 as h5', element : 'h2', attributes: {'class': 'h5'} },
{ name: 'h3 as h5', element : 'h3', attributes: {'class': 'h5'} },
{ name: 'h4 as h5', element : 'h4', attributes: {'class': 'h5'} },
{ name: 'h6 as h5', element : 'h6', attributes: {'class': 'h5'} },
// Headers as h6
{ name: 'h1 as h6', element : 'h1', attributes: {'class': 'h6'} },
{ name: 'h2 as h6', element : 'h2', attributes: {'class': 'h6'} },
{ name: 'h3 as h6', element : 'h3', attributes: {'class': 'h6'} },
{ name: 'h4 as h6', element : 'h4', attributes: {'class': 'h6'} },
{ name: 'h5 as h6', element : 'h5', attributes: {'class': 'h6'} }
];
In other StackOverflow questions I have found answers like to add them like this, but it doesn't work.
config.stylesSet = [
{ name: 'as h1', element : ['h2', 'h3', 'h4', 'h5', 'h6'], attributes: {'class': 'h1'} },
{ name: 'as h2', element : ['h1', 'h3', 'h4', 'h5', 'h6'], attributes: {'class': 'h2'} },
{ name: 'as h3', element : ['h1', 'h2', 'h4', 'h5', 'h6'], attributes: {'class': 'h3'} },
{ name: 'as h4', element : ['h1', 'h2', 'h3', 'h5', 'h6'], attributes: {'class': 'h4'} },
{ name: 'as h5', element : ['h1', 'h2', 'h3', 'h4', 'h6'], attributes: {'class': 'h5'} },
{ name: 'as h6', element : ['h1', 'h2', 'h3', 'h4', 'h5'], attributes: {'class': 'h6'} }
];
In the docs, there is nothing about this method.
Am I missing something, is there another method or is the first method the only way?

Answer 1

Specifying multi-elements will not work. You can only specify one element for one style entry. This is because CKEditor needs to show a preview inside the dropdown how such styled element will look.
By allowing multiple elements in a single style entry, CKEditor would either need to show preview for for all elements (the same as your current solution) or preview for only one element what could help you get smaller code and smaller number of entries in styles dropdown but wouldn't be very practical from WYSIWYG point of view (the preview would not match what you get after applying the style).