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
    Roman (rc21)
    1

    TinyMCE style_formats

    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!


  • Jerode 44 posts 159 karma points
    Dec 22, 2014 @ 21:14
    Jerode
    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.

  • Roman (rc21) 7 posts 72 karma points
    Feb 04, 2016 @ 14:35
    Roman (rc21)
    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

  • Kin 30 posts 172 karma points
    Feb 22, 2016 @ 23:08
    Kin
    2

    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>
    
  • Roman (rc21) 7 posts 72 karma points
    Feb 27, 2016 @ 21:06
    Roman (rc21)
    0

    Ye, thanks Kin, it works too)

  • Ault Nathanielsz 87 posts 407 karma points c-trib
    Apr 17, 2020 @ 17:19
    Ault Nathanielsz
    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"}]
    
Please Sign in or register to post replies

Write your reply to:

Draft