Copied to clipboard

Flag this post as spam?

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


  • Mo 2 posts 22 karma points
    May 22, 2013 @ 07:10
    Mo
    0

    TinyMCE styles, styles dropdown and Umbraco

    Hey there, I'm new to Umbraco and struggling a bit with the Styles dropdown in the TinyMCE editor.

    I've searched the forum for an answer but nothing answers my questions just yet.

    I have a project that uses SASS & Foundation to pump out a CSS file with styles used by the site that I want to appear in the editor. 

    My editor.css file has simple styles like

    h1.large{}
    .errorText{}
    etc

    I've set the editor to use editor.css in the Rich Text Editor properties pane. I see the styles in my content, but the styles drop down remains empty.

    Adding the styles via Umbraco is insufficient, because it re-writes the editor.css file completely, removing required CSS. Also using the manual method outlined on the TinyMCE site (http://www.tinymce.com/wiki.php/Configuration3x:theme_advanced_styles) doesn't work since Umbraco doesn't seem to have an init function, and it also doesn't work when I add it to tinyMceConfig.config using and is also tedious when you have hundreds of styles that need to be manually mapped and changed often.

     I have also tried adding my editor.css file directly with:

    <customConfig>
      <config key="content_css">./css/app.css</config>
    </customConfig>


    However, this still doesn't populate the styles dropdown list, though does show the styles inside the editor window. 

    So, is it possible to have Umbraco/TinyMCE use the classnames in my editor.css to populate the Styles dropdown on the TinyMCE editor? Basically all I want the editor to do is use the file supplied by my project.

     

     

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    May 22, 2013 @ 22:21
    Jan Skovgaard
    0

    Hi Mo and welcome to our :)

    You should add the styles in the settings section in the "stylesheets" folder.

    Create a stylesheet called "rte" and then right click it and add the needed styles. Make sure that the alias is either a class name or a html tag like <h1> etc.

    Associate the rte.css with your rich text editor.

    Don't add any kind of styling to this stylesheet, just let it be used to add the styles and elements to the rich text editor.

    Handle the styling in whatever stylesheet you want to - just don't add any styling in the rte.css.

    Hope this makes sense.

    /Jan

  • Mo 2 posts 22 karma points
    May 23, 2013 @ 01:19
    Mo
    0

    Jan, if you read above, this is what I've tried. It's not suitable due to the fact that my site & content styles are generated with SASS and change often, often out of my control. 


    This means everytime they change, we have to update umbraco manually. With hundreds of styles, this is not maintainable. 
     

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    May 23, 2013 @ 21:17
    Jan Skovgaard
    0

    Hi Mo

    I've indeed read what you wrote above.

    My point is that the rte.css created in Umbraco containing the dropdown styles should not contain any styling of the elements and classes that can be added within the rich text editor.

    The styling can be set in another stylesheet, which is included in your master page.

    However if you want to make sure that the styles dropdown is populated automatically every time you add some new elements or classes so the dropdown options reflect this stylesheet automatically I'm actually not sure if this works on Umbraco 4.11 / 6 or if you still will need to enter these values manually.

    I remember seeing something in V5 (Which was killed during CG12 last year) where you could populate the styles dropdown by adding comments in the css file like

    /* Header 1 */

    H1{}

    /* Header 2 */

    H2{}

    Etc.

    Where the comments would be the name in the styles dropdown. However I'm not sure this feature made it into the continuation of 4.11 and V6. Perhaps it's something we should add as a feature request at http://issues.umbraco.org/dashboard since it would be very nice imho.

    Hope the above makes sense and that I have understood you correctly :)

    /Jan

  • Jay Dobson 75 posts 121 karma points
    Feb 23, 2016 @ 19:50
    Jay Dobson
    0

    Hey Jan,

    Was this ever done? A comment syntax within the style sheet that TinyMCE picks up?

    Thanks,

    Jay

  • Kevin Jump 2309 posts 14673 karma points MVP 7x c-trib
    Feb 23, 2016 @ 20:04
    Kevin Jump
    1

    Hi Jay,

    this did make it into umbraco from v7.3+ the format is

    /*umb_name:Heading 1/ h1 {}

    Kevin

  • Jay Dobson 75 posts 121 karma points
    Feb 23, 2016 @ 20:18
    Jay Dobson
    0

    Hey Kevin,

    You saved my bacon. ;)

    There is an extra * at the beginning though.

    /*umb_name:Heading 1/

    Thank you so much!

    Jay

Please Sign in or register to post replies

Write your reply to:

Draft