tinymce custom bullet and number lists

bmeyer71 picture bmeyer71 · Mar 12, 2013 · Viewed 12.8k times · Source

I am wondering if it is possible to create custom bullet and number lists?

I've added the plugin advlist and tried the examples others have tried here and here. The first one seems to allow some changes to be made. However, I am trying to replace the list-style-image for either bullet or number lists with a custom image but the "styles" option "listStyleImage" does not seem to work even though it appears in the application code.

I've also tried adding a css class to see if that would work, but the "classes" statement doesn't seem to work either.

I've set the init section up like in the examples and followed the options in the formats documentation, but classes and and setting "listStyleImage" for styles don't seem to work.

I'm pretty sure adding the class to the html code manually will work. I would just like to have it set as a custom list so that it does not have to be done manually.

Is this even possible?

Is there another way to accomplish this?

UPDATE: To get around this for now, I am having to manually add a class to the html via the editor. It works, but it would be nice if there were a way to do it by adding custom lists.

Answer

baruch picture baruch · Oct 23, 2013

The only way that i found till now to cahnge the bullets to an image is by using the

style_formats.

After you add a list simply mark It and apply the format.

the tinymce code:

toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor emoticons", 
image_advtab: true,

    style_formats: [{
        title: 'checkMark', selector: 'li', 
        styles: {
            'list-style-image' : 'url("../images/check-mark.png" )' //your desired image
        }   
    }],