Add class for ul in editor

Nils Melkerud

Vote:

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.

<li>Itwem 2</li>

</ul>

</ul>

Could you point me in the right direction?

#27533

Feb 02, 2009 12:45

Nicklas Israelsson

Vote:

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

Nils Melkerud

Vote:

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

Nicklas Israelsson

Vote:

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

Nils Melkerud

Vote:

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

Lars Flågan

Vote:

Has anyone ever found a solution to adding classes to a UL tag in the wysiwyg editor?

#33127

Oct 02, 2009 14:29

Tahir Naveed

Vote:

Any solution to this problem... Please help

#39703

May 28, 2010 17:42

henriknystrom

Vote:

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

Try our conversational search powered by Generative AI!

Add class for ul in editor