tinymce style_formats

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Roman (rc21) 7 posts 72 karma points

Sep 26, 2014 @ 15:20

UI Questions

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!

Copy Link

Jerode 44 posts 159 karma points

Dec 22, 2014 @ 21:14
0
I believe you do this though the stylesheet in the backoffice. Try logging in and expanding the admin stylesheet. Click create and add the new ones.
```
Name: Red text
Alias: span
Styles: color: '#ff0000'
```
Not sure on the styles one though, you may need to test that out a bit.
Copy Link
Roman (rc21) 7 posts 72 karma points

Feb 04, 2016 @ 14:35
101
If someone interests I solve this by hacking umbraco.controller.js (or umbraco.directives.js for grid) and inserting to the Umbraco.PropertyEditors.RTEController (gridRte directive):
```
$http.get('/js/backend/rte-formats.json')
            .then(function(res){
                styleFormats = res.data;
            });
```
rte-formats.json must contain json with formats definition in tinyMCE style
Copy Link

Kin 30 posts 172 karma points

Feb 22, 2016 @ 23:08

Your JSON is wrong. You need to put the properties names between quotes/double quotes.

<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>

Copy Link

Roman (rc21) 7 posts 72 karma points

Feb 27, 2016 @ 21:06

0

Ye, thanks Kin, it works too)

Copy Link
Ault Nathanielsz 87 posts 407 karma points c-trib

Apr 17, 2020 @ 17:19
0
can anyone suggest how to add attributes?
```
"attributes": {"lang":"en"}
```
*EDIT ^ This first method is correct. It is removed for some elements e.g. "span" which makes testing it confusing. End Edit*

does not seem to work. Neither does:
```
"attributes":[ {"lang":"en"}]
```
Copy Link
is working on a reply...

Please Sign in or register to post replies