Add class for ul in editor

 

A client wants to be able to style ul:s differently in the editor. I was trying to add a class to the editor using EditMenuName but did not manage to get it to work.

E.g.

<ul class="grenBullets">

<li>Item 1</li>

<li>Itwem 2</li>

</ul>

 <ul class="blueBullets">

 

<li>Item 1</li>

<li>Item 2</li>

</ul> 

 

 

 

Could you point me in the right direction?

#27533 Feb 02, 2009 12:45
  • Member since: 2007
     

    Have you seen this post?

    http://world.episerver.com/Forum/Pages/Thread.aspx?id=19877&epslanguage=en

    That might help you solve your issues.

    #27541 Feb 02, 2009 15:24
  •  

    Thanks for the tip but my problem is not that the style does not show in the dropdown.

    If I put a css rule like ul.test {EditMenuName: test;} in the editor.css it shows up in the style dropdown.

    Then I try to highlight an existing bullet list in the editor and apply the style. This results in corruppted HTML.

    Screen.css 
    div#submainleft ul.test {
    line-height: 125%;
    list-style-type: none;
    margin-left: 0px;
    }
    div#submainleft ul.test li
    {
      list-style-type: none;  
      list-style-position:outside;
      margin: 0 0 6px 0;
      background: url(../images/icon_DarkGreenArrow.gif) no-repeat -7px 0px;
      padding-left: 14px; }
     
    Editor.css
    ul.test{ EditMenuName: test;}

    HTML before:
     <UL>
    <LI>item1</LI>
    <LI>item2</LI></UL>

    HTML after I highlight the list and style it with the test class from the drop down:
    <UL class=test>
    <UL>
    <LI>item1</LI>
    <LI>item2</LI></UL></UL>

    Mayby this is not the way to do it. Another approach would be to make an editor plugin that simply pastes in correct HTML and then let the user cheange the content?

     

    #27560 Feb 03, 2009 8:07
  • Member since: 2007
     

    Or you could just skip the UL and just use a div with class=test to contain your UL. Something like this perhaps:

    .test {EditMenuName: test;} .test ul {border:0;} .test ul li {border:0;}
    #27561 Feb 03, 2009 8:36
  •  

    Could not get it to work after playing around with it for some time. Made a plugin that pastes pre-defined html into the editor.

    Cheers!

    #27655 Feb 05, 2009 13:20
  • Member since: 2005
     
    Has anyone ever found a solution to adding classes to a UL tag in the wysiwyg editor? 
    #33127 Oct 02, 2009 14:29
  • Member since: 2010
     

    Any solution to this problem... Please help

    #39703 May 28, 2010 17:42
  • Member since: 2004
     

    I've found that the only solution for this problem for the CMS5 editor, if you really need the class on the UL element and not on a surrounding DIV element, is to build a custom editor plugin. Saying that I would recommend being practical and use the DIV workaround.

    #39748 Jun 01, 2010 2:12