tinymce custom bullet and number lists - tinymce

Question

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 1

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
}
}],

Answer 2

stumbled upon this question while doing research, on the same issue, after some debugging found a way to do this
the advlist plugin should be installed and activated
within the initialization, advanced list style should be configured for example:
tinyMCE.init({...
advlist_bullet_styles: [{
title: 'image bullets',
styles: {
listStyleImage: "url('url/to/image.png')"
}
}, {
title: 'Default',
styles: {
listStyleType: '',
listStyleImage: ""
}
}, {
title: 'Circle',
styles: {
listStyleType: 'circle',
listStyleImage: ""
}
}, {
title: 'Disc',
styles: {
listStyleType: 'disc',
listStyleImage: ""
}
}, {
title: 'Square',
styles: {
listStyleType: 'square',
listStyleImage: ""
}
}],
...});
this gives you the default bullet styles as well as custom image style. the styles array sets properties of UL element.
and you set templates for number lists by using advlist_number_styles property.

Answer 3

Here is a good example of ol list with multi level numbering.
EXAMPLE the SCSS compiles to:
ol {
list-style: none;
position: relative;
padding-left: 15;
margin: 0;
}
ol {
counter-reset: level0 0;
}
ol li::before {
content: counter(level0,decimal) "";
counter-increment: level0;
position: absolute;
right: 100%;
margin-right: 15px;
text-align: right;
font-weight: bold;
font-size: 0.8em;
}
ol li:empty + {
counter-reset: level0 0;
}
ol li:empty::before {
display: none;
}
ol ol {
counter-reset: level1 ;
}
ol ol li::before {
content: counter(level0,decimal) "." counter(level1,decimal) "";
counter-increment: level1;
position: absolute;
right: 100%;
margin-right: 15px;
text-align: right;
font-weight: bold;
font-size: 0.8em;
}
ol ol li:empty + ol {
counter-reset: level1 ;
}
ol ol li:empty::before {
display: none;
}
ol ol ol {
counter-reset: level2 ;
}
ol ol ol li::before {
content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "";
counter-increment: level2;
position: absolute;
right: 100%;
margin-right: 15px;
text-align: right;
font-weight: bold;
font-size: 0.8em;
}
ol ol ol li:empty + ol ol {
counter-reset: level2 ;
}
ol ol ol li:empty::before {
display: none;
}
ol ol ol ol {
counter-reset: level3 ;
}
ol ol ol ol li::before {
content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "";
counter-increment: level3;
position: absolute;
right: 100%;
margin-right: 15px;
text-align: right;
font-weight: bold;
font-size: 0.8em;
}
ol ol ol ol li:empty + ol ol ol {
counter-reset: level3 ;
}
ol ol ol ol li:empty::before {
display: none;
}
ol ol ol ol ol {
counter-reset: level4 ;
}
ol ol ol ol ol li::before {
content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "." counter(level4,decimal) "";
counter-increment: level4;
position: absolute;
right: 100%;
margin-right: 15px;
text-align: right;
font-weight: bold;
font-size: 0.8em;
}
ol ol ol ol ol li:empty + ol ol ol ol {
counter-reset: level4 ;
}
ol ol ol ol ol li:empty::before {
display: none;
}
ol ol ol ol ol ol {
counter-reset: level5 ;
}
ol ol ol ol ol ol li::before {
content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "." counter(level4,decimal) "." counter(level5,decimal) "";
counter-increment: level5;
position: absolute;
right: 100%;
margin-right: 15px;
text-align: right;
font-weight: bold;
font-size: 0.8em;
}
ol ol ol ol ol ol li:empty + ol ol ol ol ol {
counter-reset: level5 ;
}
ol ol ol ol ol ol li:empty::before {
display: none;
}
ol ol ol ol ol ol ol {
counter-reset: level6 ;
}
ol ol ol ol ol ol ol li::before {
content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "." counter(level4,decimal) "." counter(level5,decimal) "." counter(level6,decimal) "";
counter-increment: level6;
position: absolute;
right: 100%;
margin-right: 15px;
text-align: right;
font-weight: bold;
font-size: 0.8em;
}
ol ol ol ol ol ol ol li:empty + ol ol ol ol ol ol {
counter-reset: level6 ;
}
ol ol ol ol ol ol ol li:empty::before {
display: none;
}
ol ol ol ol ol ol ol ol {
counter-reset: level7 ;
}
ol ol ol ol ol ol ol ol li::before {
content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "." counter(level4,decimal) "." counter(level5,decimal) "." counter(level6,decimal) "." counter(level7,decimal) "";
counter-increment: level7;
position: absolute;
right: 100%;
margin-right: 15px;
text-align: right;
font-weight: bold;
font-size: 0.8em;
}
ol ol ol ol ol ol ol ol li:empty + ol ol ol ol ol ol ol {
counter-reset: level7 ;
}
ol ol ol ol ol ol ol ol li:empty::before {
display: none;
}
li {
margin-top: 0.5em;
margin-bottom: 0.5em;
position: relative;
}

Answer 4

Background
I know this question is now 5 years old but I ran into a similar issue and found no resources to help resolve it. I also know this is seldom an issue because the world uses a small black circle as a bullet (hence the name) everywhere in the world. I posted the question on the TinyMCE community site, but after a few days my account was locked (what?!). If anyone has a better solution, please let me know. This solution seems a little too much like it's held together with Duck Tape and if a TinyMCE update changes, this hack will be lost.
Link to that issue
My issue
I live in Japan and the companies I work for... their default "bullet" is a dash. All of them. I don't know why. Like this:
Support Business by providing IT service and deeply involved in the process of the system solution:
- Understand the company’s prior strategy
- Studying business benefit (ROI)
TinyMCE does not allow any customization of the list or advanced list plugins as far as what html gets inserted into the document. If I could I would just set a class on all the different bullets, or even better, create a new bullet type for the list type. But as far as I can see, it's just not possible. (If anyone knows how to customize lists in TinyMCE short of editing the source, please please please tell me!)
My Fix
I made the dash the Default:
In the site html and the Tiny editor I use the class 'order-wrapper' around anything with the bullets and in the editor I have: body_class: 'order-wrapper',
This css makes any UL with no 'list-style-type' be indented like a bullet list and have a dash-like bullet:
.order-wrapper ul:not([style*='list-style-type']) {
list-style: none;
margin-left: 0;
padding-left: 3em;
}
.order-wrapper ul:not([style*='list-style-type']) > li:before {
display: inline-block;
content: "-";
width: 1.5em;
margin-left: -1.5em;
}
But when word document dashed bullets are pasted they include a dash so I end up with:
-- Understand the company’s prior strategy
So to get rid of the dashes at the beginning of the lines I added code in the editor init to remove the - at the beginning of a line if it's pasted as a list element. (There's probably a better way to filter that, so if anyone has a better way, please let me know):
init_instance_callback: function (editor) {
//On Paste: remove the dash from the beginning of li elements.
editor.on('PastePreProcess', function (e) {
e.content = e.content.replace(/<li>- /g, "<li>")
});
},
So if the user pastes any bullet from Word it will become a dash bullet list (default). Then they can highlight the list and choose circle, disc, or square to get the other bullet types.

Answer 5

Accoring to the tiny-mce documentation you can only define a single comma-separated string of values like "default,circle,disc,square" to advlist_bullet_styles.
Further more you can define non-standard conforming values as well (e.g. arrow):
tinySetup({
selector: "textarea",
plugins: "advlist",
advlist_bullet_styles: "default,arrow"
});
Based on this setup, you won't get a class name but you can apply a dirty css selector to achieve styling:
ul[style="list-style-type: arrow;"] li{
list-style-type: none;
list-style-image: url(list-icon-arrow.png);
}

Answer 6

My solution (18.11.2022) is the following:
In the appsttings.json set the following lines:
"RichTextEditor": {
"Commands": [
your commands here... as array of objects { "alias": "yourAlias", "name": "yourName", "mode": "rteMode like Insert"}
],
"CustomConfig": {
"image_advtab": "true",
"advlist_bullet_styles": "default,circle,disc,square,checkmark"
}
}
This appears then in your RTE in Umbraco:
see the image sample
And then you can add your own CSS in order to style this custom checkmark:
/* Umbraco 9 - custom style for bullet list */
ul[style='list-style-type: checkmark;'] li {
list-style-type: none;
font-family: "Fontawesome";
padding-left: 5px;
}
ul[style='list-style-type: checkmark;'] li::marker {
content: "\f00c";
font-size: 16pt;
color: #f52d00;
}
:: marker ist the custom checkmark element, it is in my case fontawesome icon - so I can style it much better as if I could use any .png images instead if icon.