---
title: "Advanced List plugin"
description: "Create styled number and bulleted lists."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/advlist/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/advlist/index.md"
version: "6"
last_updated: "2022-12-15T11:14:35Z"
tokens: 1226
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/advlist/).
# 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/) (`lists`) plugin must be activated for the `advlist` plugin to work.

## Basic setup

```js
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,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`

```js
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`

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

## Commands

The Advanced Lists 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](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#Values).

Examples
```js
tinymce.activeEditor.execCommand('ApplyOrderedListStyle', false, {
  'list-style-type': 'decimal'
});
tinymce.activeEditor.execCommand('ApplyUnorderedListStyle', false, {
  'list-style-type': 'disc'
});
```

## Inline formatting

> **Note:** This feature is only available for TinyMCE 6.2 and later.
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.

> **Important:** 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](../introduction-to-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.

> **Note:** Inline-formatting as applied to list elements has always been supported by [PowerPaste](../introduction-to-powerpaste/) and continues to be so supported.