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 theadvlist
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 stylecircle
: a hollow circledisc
: a filled circlesquare
: 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 stylelower-alpha
: lowercase ASCII letters, e.g. a, b, c, … zlower-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, … Zupper-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'
});
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
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.