overriding rte style_formats - Using Umbraco 7

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

Dan White 206 posts 510 karma points c-trib

Jan 15, 2015 @ 20:41

Overriding RTE style_formats??

Anyone know how to override the Umbraco default rte style_formats? Prior to v7 I'd do it in the tinyMceConfig by adding something like:

<config key="nonexistingkey">
    <![CDATA[',
    preview_styles : false,
    style_formats : [
        {title : "-Content Header"},
        {title : "h2", block : "h2", classes : "replace"},
        {title : "h3", block : "h3"},
        {title : "h4", block : "h4"},
        {title : "h5", block : "h5"},
        {title : "h6", block : "h6"},
        {title : "Image Wrap--right", selector : "img", classes : "thumb-right right"},
        {title : "Image Wrap--left", selector : "img", classes : "thumb-left left"}
    ],
    notusedproperty:'xx]]>
</config>

It isn't working in v7. I've tried a couple ways of formatting it like the following, but still no luck.

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

The RTE fails to load and I get a browser error like:

Copy Link

Dan White 206 posts 510 karma points c-trib

Jan 15, 2015 @ 21:59

0

Doing some more digging I can see that my settings are being assigned, but as a string.

I'm assuming that if there was some conditional logic here (https://github.com/umbraco/Umbraco-CMS/blob/5b9a98ad6ae9e63322c26f7b162204e34f7fcb54/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js#L118) to do a JSON.parse on the value it would work?

Copy Link

Dan White 206 posts 510 karma points c-trib

Jan 16, 2015 @ 17:59

For anyone else who may be trying to do this, I resolved it by adding the following code to /umbraco/js/umbraco.controllers.js around line:8092 (using Umbraco 7.2.1) just above...
if(tinyMceConfig.customConfig)

if (tinyMceConfig.customConfig.style_formats) {
    tinyMceConfig.customConfig.style_formats = JSON.parse(tinyMceConfig.customConfig.style_formats);
}

And changing the config to be valid JSON

[
    {"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"}
]

Copy Link

is working on a reply...

Please Sign in or register to post replies