Hi all,

I try to use standart TinyMCE way to adding style-formants at drop-down menu in editor, like this:

tinymce.init({
    ...
    style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
});

To do this I add in tinyMceConfig.config at custom config section such key:

<config key="style_formats">[        
{title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
]</config>

But it doesn't work correctly.

I need to use this way because Umbraco way to add styles in settings tab of backend enables only to add tags or css classes, and doesn't tag and class together. I need when editor choose some style in drop-down this style is applied to surrounding tag of selection, but umbraco pasts span tag with style.

Does anyone know how to use standart TinyMCE command 'style_formats' or maybe another way to applay selected styles to surrounding tag?

I use Umbraco 7.

Thanks for any help!