Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Advanced List plugin

Create styled number and bulleted lists.

Contribute to this page

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.

Important: The Lists (lists) plugin must be activated for the advlist plugin to work.

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,disc,square'

Possible Values:

  • default: your 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: 'advlist',
    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: your 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: 'advlist',
  advlist_number_styles: 'lower-alpha'  // only include lower alpha in list
});

Commands

The Advanced Lists plugin provides the following JavaScript 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': 'disc'
});
tinymce.activeEditor.execCommand('ApplyUnorderedListStyle', false, {
  'list-style-type': 'decimal'
});

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.