Advanced List 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.

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.

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.