Copied to clipboard

Flag this post as spam?

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


  • Matt Tolliday 11 posts 31 karma points
    Mar 20, 2015 @ 16:19
    Matt Tolliday
    0

    Add styles to UL in Tiny MCE

    Could anyone help out adding styles to the TINY MCE editor for bullet pointed lists?

    I require 3 different styles but seem unable to get the dropdowns to add the classes i need.

    One for example would be:

    <ul class="stripe-style">
       <li>...</li>
       <li>...</li>
    </ul>
    

    I have the styles in a linked stylesheet for the rich text editor, and ive added a sub-style to the stylesheet element in the back office with:

    Name: List - Striped Alias: .striped-styling

    But highlighting the list in the text editor and selecting the style does nothing.

    Thanks!

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Mar 20, 2015 @ 16:23
    Jan Skovgaard
    0

    Hi Matt

    What exact version of Umbraco are you trying to achieve this on? The custom classses and li elements can be really hard sometimes if not impossible.

    So I'm wondering if it could somehow be achieved in another way? Is the list something that should be rendered from a rich text editor? Or could it be generated in another way?

    /Jan

  • Matt Tolliday 11 posts 31 karma points
    Mar 20, 2015 @ 18:25
    Matt Tolliday
    0

    Hi Jan,

    I'm using version 7.1.9. We're planning on migrating the project to latest (7.2.+) within the next few months if that helps at all.

    Agreed in your thought process. However they really are just simple bullet pointed lists of text which should be in a RTE. What other ways did you have in mind out of interest?

    Is there really such an issue in doing this through TinyMCE styles? I've had issues with adding styles to tables as well here, although I've had to abandon that for now due to a number of forum posts I've read... I had hoped it would be a simple process!

    Thanks

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Mar 20, 2015 @ 18:54
    Jan Skovgaard
    0

    Hi Matt

    Yeah if it's rich text content then they of course belong there as rich text - I was just wondering if the content was perhaps more like elements, which should be created as their own content types - Sometimes people try to force stuff in the RTE that clearly does not belong there - So just checking the scenario :)

    If don't know if using a workaround with some JavaScript to target the lists if certain conditions have been fulfilled?

    I'm afraid it's not simple unfortunately.

    /Jan

  • Matthew Kirschner 323 posts 611 karma points
    Mar 20, 2015 @ 19:06
    Matthew Kirschner
    1

    I'm using Umbraco 7.2.3 and am also unable to add formats to a ul element. Here's what I noticed:

    • Using the stylesheet property ul.link-list
      • Adding this format to a list will wrap the list inside a second ul element. Not good.
    • Using the stylesheet property .link-list
      • This will add the .link-list class to a span within the individual li elements, rather than just the ul. This is slightly better than the first method.

    Currently there doesn't seem to be any way of formatting a ul element properly. This should be a basic feature of a rich text editor. We shouldn't expect content creators to have to use another data type just to make a pre-formatted list.

  • Mike 15 posts 34 karma points
    Mar 21, 2015 @ 16:05
    Mike
    0

    You can do this several way. Best is probably to create a custom button With the tinyMceConfig.config or you could enable the insert template plugin.

    The Umbraco.controller.js file has some issues though that means when you specify custom style formats it overrides the Umbraco css generated styles. This has been addressed and the latest file on GitHub has a fix so style formats are combined but you may still want to tweak how it merges them and I am not sure the updates will work with a nested function in the json I can't remember off top of my head but it's simple to fix if it doesn't.

    Edit: oh your original class will work also I think you just have to add "inline" or "block" to it I think.

  • Matt Tolliday 11 posts 31 karma points
    Mar 23, 2015 @ 11:13
    Matt Tolliday
    0

    Hi Mike,

    Thanks for the reply - could you provide any additional information on how to achieve what you are suggesting?

    I was under the impression the template plugin was broken for Umbraco 7+ or at least required some changes to the core Umbraco js to function? I admit I am not keen on changing the core of Umbraco. Alternatively, I have never amended the TinyMCE plugin before, could you provide any guidance on adding a custom button to achieve what I'm after?

  • John Churchley 272 posts 1258 karma points c-trib
    Mar 23, 2015 @ 12:04
  • Mike 15 posts 34 karma points
    Mar 23, 2015 @ 17:44
    Mike
    0

    Paste your exact css rule and I'll do the code

  • bengan 26 posts 90 karma points
    May 19, 2015 @ 19:16
    bengan
    0

    Hi there,

    I'm facing exactly the same problem. In Umbraco v4.7.1.1 I could create a list in RTE. Then I could mark one of the list elements in RTE and select a class from the styles-dropdown-list, which modified the HTML as follows:

    <ul>
      <li class="arrow">Element1</li>
      <li>Element2</li>
    </ul>
    

    This allowed us to change the default list-style-image of the list elements.

    Now, after migrating to Umbraco v7.2.4, the RTE generates the following HTML, when adding the class to the list element:

    <ul>
      <li><span class="arrow">Element1</span></li>
      <li>Element2</li>
    </ul>
    

    But we need the class directly on the ul or li element. I tried to create the RTE-Format-style as Matthew did:

    .arrow This creates the additional span-element

    li.arrow This simply does nothing.

    ul.arrow This creates a second ul-element around the existing one.

    Is a fix for this behavior planned or any workaround?

    Thanks for any information, Ben

  • bengan 26 posts 90 karma points
    May 19, 2015 @ 19:30
    bengan
    1

    That's really weird... I just gave it another try and found a workaround, that might work for some of you, too:

    I defined my RTE-style as div.myListElementStyle. Then I wrote some text in RTE (in a standard p-tag, not in an ul-tag!), marked it and selected the list-button. After that the HTML looked like that:

    <ul>
      <li class="myListElementStyle"></li>
    </ul>
    

    It's not the best to tell our customer, but better than saying: "Please edit the HTML and add the class xyz to the li-element.".

    But I am still interested in a real fix of the RTE! ;)

    Best regards, Ben

  • Pedro Adão 43 posts 80 karma points
    Apr 17, 2018 @ 17:24
    Pedro Adão
    0

    This worked for me. Thanks

  • Matthew Kirschner 323 posts 611 karma points
    May 19, 2015 @ 19:38
    Matthew Kirschner
    0

    That's a nice find, @bengan; I'll try it later.

    We still don't have a great solution for styling the entire list element directly. This is even more vital than styling individual list items.

  • Bendik Engebretsen 105 posts 202 karma points
    Jun 30, 2015 @ 12:47
    Bendik Engebretsen
    0

    I'm facing the same challenge, currently in Umbraco 7.2.5. And I agreee that we really should have a way to style ul elements within the RTE (tinyMCE). Mike suggests creating a custom button in the tinyMceConfig.config, have anyone tried this?

  • Laurence Gillian 600 posts 1219 karma points
    Oct 06, 2016 @ 14:23
    Laurence Gillian
    0

    This still seems to be an issue!

Please Sign in or register to post replies

Write your reply to:

Draft