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'
});
Interactive demo
-
TinyMCE
-
HTML
-
JS
-
Edit on CodePen
<textarea id="advlist-demo">
<h2>Advanced List Styles Demo</h2>
<h3>Basic Bulleted Lists</h3>
<p>Try changing these bullet styles using the toolbar or highlighted text and change the list styles from the context toolbar:</p>
<ul>
<li>Default bullet style</li>
<li>Another item with default style</li>
<li>Third item to demonstrate</li>
</ul>
<h3>Numbered Lists with Different Styles</h3>
<p>Experiment with different numbering formats:</p>
<ol>
<li>First step in the process</li>
<li>Second step with more details</li>
<li>Third step to complete the sequence</li>
</ol>
<h3>Nested Lists (Indentation)</h3>
<p>Create nested lists by indenting items:</p>
<ul>
<li>Main category
<ul>
<li>Subcategory item 1</li>
<li>Subcategory item 2</li>
</ul>
</li>
<li>Another main category
<ol>
<li>Numbered sub-item 1</li>
<li>Numbered sub-item 2</li>
</ol>
</li>
</ul>
<h3>Mixed Content Lists</h3>
<p>Lists can contain various content types:</p>
<ul>
<li><strong>Bold text</strong> in a list item</li>
<li><em>Italic text</em> for emphasis</li>
<li>Text with <a href="#">links</a> included</li>
<li>Items with <code>inline code</code> snippets</li>
</ul>
<h3>Project Planning Example</h3>
<ol>
<li>Project Setup
<ul>
<li>Initialize repository</li>
<li>Install dependencies</li>
<li>Configure build tools</li>
</ul>
</li>
<li>Development Phase
<ol>
<li>Create wireframes</li>
<li>Implement core features</li>
<li>Add user interface elements</li>
</ol>
</li>
<li>Testing & Deployment
<ul>
<li>Unit testing</li>
<li>Integration testing</li>
<li>Production deployment</li>
</ul>
</li>
</ol>
</textarea>
tinymce.init({
selector: '#advlist-demo',
plugins: [
'advlist', 'anchor', 'autolink', 'charmap', 'code', 'fullscreen',
'help', 'image', 'insertdatetime', 'link', 'lists', 'media',
'preview', 'searchreplace', 'table', 'visualblocks', 'wordcount'
],
toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code | fullscreen | help',
menubar: 'file edit view insert format tools table help',
height: 600,
setup: (editor) => {
editor.ui.registry.addContextToolbar('textselection', {
predicate: () => !editor.selection.isCollapsed(),
items: 'bullist numlist',
position: 'selection', // 'selection' | 'node' | 'line'
scope: 'node'
});
}
});
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
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 …
Toolbar buttons
The List Styles plugin provides the following toolbar buttons:
Toolbar button identifier | Description |
---|---|
|
Formats the current selection as a bullet list with dropdown options for different bullet styles (disc, circle, square). |
|
Formats the current selection as a numbered list with dropdown options for different number styles (decimal, alpha, roman, greek). |
The List Styles plugin extends the core bullist and numlist toolbar buttons by adding dropdown arrows that allow users to select from different list styles. These buttons are provided by the core lists plugin, but the dropdown functionality is added by the List Styles plugin.
|
These toolbar buttons can be added to the editor using:
-
The
toolbar
configuration option. -
The
quickbars_insert_toolbar
configuration option.
Menu items
The List Styles plugin provides the following menu items:
Menu item identifier | Default Menu Location | Description |
---|---|---|
|
Format |
Formats the current selection as a bullet list with dropdown options for different bullet styles. |
|
Format |
Formats the current selection as a numbered list with dropdown options for different number styles. |
The List Styles plugin extends the core list menu items in the Format menu by adding dropdown functionality that allows users to select from different list styles. These menu items are provided by the core lists plugin, but the dropdown functionality is added by the List Styles plugin.
|
These menu items can be added to the editor using:
-
The
menu
configuration option. -
The
contextmenu
configuration option.
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.
tinymce.activeEditor.execCommand('ApplyOrderedListStyle', false, {
'list-style-type': 'decimal'
});
tinymce.activeEditor.execCommand('ApplyUnorderedListStyle', false, {
'list-style-type': 'disc'
});
Inline formatting
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. |