CODEWITHSUNDEEP
csscross-browserckeditor
aendra
aendra

Reputation: 5346

Adding entries to CKEDITOR.stylesSet that involve multiple elements

I have a design for a bullet list that has two things:

a. A blue arrow image replacing the list icon

b. A very light dotted border atop and below each list item.

I'm wanting to build this into CKEditor via (CKEDITOR.stylesSet) so that the user can select this particular style of list from a dropdown and not have to write any code to do so.

I have had success to the point where I can create a list with a particular class (and now have that themed), however, am running into issues given that it seems the only way to apply both the dotted line and the blue arrow is to use multiple backgrounds via CSS3, which, SURPRISE, doesn't work in IE8 or below.

If I added some DOM pollution (I.e., surrounded the list item text in a span) I could theme that; however, it seems CKEDITOR.stylesSet only allows for setting one element per style (I.e., I can set ul as an element or li as an element, but there's no way I can use one style to set a class on the UL and surround the text of the child li elements with a span).

Or is there? I'm thinking of falling back to JavaScript for this, but I'm also open to other suggestions to accomplish what I'm doing.

Thanks!

Upvotes: 0

Views: 689

Answers (1)

jwynveen
jwynveen

Reputation: 1291

There's no need to use background images for either the arrow or the dotted line. You can do both via CSS. All you need CKEditor to do is apply a class to the (which it sounds like you already are) and then use CSS similar to this:

.styled li {
    border-top: dotted 1px black;
    border-bottom: dotted 1px black;
}
.styled
{
    list-style: square url('http://www.wcb.ny.gov/site_images/blueArrow.gif')
}

Full working example: http://jsfiddle.net/jwynveen/ZhjCK/

Upvotes: 1

Related Questions