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

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


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

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

  • Dan White 206 posts 510 karma points c-trib
    Jan 15, 2015 @ 21:59
    Dan White

    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 ( to do a JSON.parse on the value it would work?

  • Dan White 206 posts 510 karma points c-trib
    Jan 16, 2015 @ 17:59
    Dan White

    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.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"}
Please Sign in or register to post replies

Write your reply to: