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

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
});

Toolbar buttons

The List Styles plugin provides the following toolbar buttons:

Toolbar button identifier Description

bullist

Formats the current selection as a bullet list with dropdown options for different bullet styles (disc, circle, square).

numlist

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 List Styles plugin provides the following menu items:

Menu item identifier Default Menu Location Description

bullist

Format

Formats the current selection as a bullet list with dropdown options for different bullet styles.

numlist

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:

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

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.