List Styles plugin

The advlist plugin extends the core bullist and numlist toolbar controls by adding CSS list-style-type styled number formats and bullet types to the controls.

The Lists (lists) plugin must be activated for the advlist plugin to work.
As of TinyMCE 7.0, the Advanced Lists plugin has been renamed to List Styles. When adding List Styles in your editor, continue to use advlist.

Basic setup

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'lists advlist'
});

Options

These settings affect the execution of the advlist plugin by providing more granular control of list styles.

advlist_bullet_styles

This option allows you to include specific unordered list item markers in the default bullist toolbar control.

Type: String

Default value: 'default,circle,square'

Possible values:

  • default: the browser’s default style

  • circle: a hollow circle

  • disc: a filled circle

  • square: a filled square

Example: using advlist_bullet_styles

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'lists advlist',
  toolbar: 'bullist',
  advlist_bullet_styles: 'square'  // only include square bullets in list
});

advlist_number_styles

This option allows you to include specific ordered list item markers in the default numlist toolbar control.

Type: String

Default value: 'default,lower-alpha,lower-greek,lower-roman,upper-alpha,upper-roman'

Possible values:

  • default: the browser’s default style

  • lower-alpha: lowercase ASCII letters, e.g. a, b, c, …​ z

  • lower-greek: lowercase classical Greek (alpha, beta, gamma), e.g. α, β, γ …​

  • lower-roman: lowercase roman numerals, e.g. i, ii, iii, iv, v …​

  • upper-alpha: uppercase ASCII letters, e.g. A, B, C, …​ Z

  • upper-roman: uppercase roman numerals, e.g. I, II, III, IV, V …​

Example: using advlist_number_styles

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'lists advlist',
  toolbar: 'numlist',
  advlist_number_styles: 'lower-alpha'  // only include lower alpha in list
});

Commands

The List Styles plugin provides the following TinyMCE commands.

Command Description

ApplyOrderedListStyle

Converts the current selection to an ordered list. Accepts an object specifing the list type.

ApplyUnorderedListStyle

Converts the current selection to an unordered list. Accepts an object specifing the list type.

For information on available list types, see: MDN web docs - list-style-type.

Examples
tinymce.activeEditor.execCommand('ApplyOrderedListStyle', false, {
  'list-style-type': 'decimal'
});
tinymce.activeEditor.execCommand('ApplyUnorderedListStyle', false, {
  'list-style-type': 'disc'
});

Inline formatting

This feature is only available for TinyMCE 6.2 and later.

List bullets and list numbers can now be inline-formatted.

Inline-formatting, also known as spot-formatting, is the direct formatting of an object. It contrasts with formatting applied to an object because that object is a particular type of object.

As of TinyMCE 6.2, a sub-set of all inline-formatting options can be applied to list bullets and list numbers.

If an end-user selects the entire contents of a list item and applies inline formatting — such as a color change or a font-size change — this spot-formatting is also applied to the list item’s associated bullet or number.

Only the list bullets or list numbers associated with the selection take on the inline-formatting applied to the selection.

If the selection having inline formatting applied is one list item (that is, if the selection runs from one <li> tag to its associated </li> tag), the bullet or number associated with the selected list item takes on the inline-formatting applied to the selection.

If the selection is the entire list, (that is, if the selection runs from the list’s opening <ol> or <ul> tag to the closing </ol> or </ul> tag, or if the selection runs from the list’s first <li> tag to the last </li> tag), every bullet or number takes on the inline-formatting applied to the selection.

If, after applying inline-formatting, a partial selection of the now inline-formatted material is made and said inline-formatting is removed from the partial selection, the list bullet or list number formatting will also be removed.

PowerPaste Premium plugin support

Users of the PowerPaste Premium plugin should note, this plugin does not, currently, support inline-formatted bullets or list numbers.

Inline-formatting, as applied to the bullets or list numbers, is lost when such material is copied and pasted using the PowerPaste plugin.

Inline-formatting as applied to list elements has always been supported by PowerPaste and continues to be so supported.