Lists plugin

The lists plugin allows you to add numbered and bulleted lists to TinyMCE. To enable advanced lists (e.g. alpha numbered lists, square bullets) you should also enable the Advanced List (advlist) plugin.

The plugin also normalizes list behavior between browsers. Enable it if you have problems with consistency making lists.

Basic setup

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'lists',
  toolbar: 'numlist bullist'
});

Example adding the listprops menu item to the Tools menu

The listprops menu item opens the List Properties dialog.

This dialog only works with numbered lists. The menu item is inactive unless the selection or insertion point is within a numbered list.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'lists',
  toolbar: 'bullist numlist',
  menu: { tools: { title: 'Tools', items: 'listprops' }},
});

Options

These settings affect the execution of the lists plugin.

lists_indent_on_tab

This boolean option allows to disable the indent on tab key functionality. Its default value is set to true.

Type: Boolean

Default value: true

Possible values: true, false

Example: using lists_indent_on_tab

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'lists',
  toolbar: 'numlist bullist',
  lists_indent_on_tab: false
});

Toolbar buttons

The Lists plugin provides the following toolbar buttons:

Toolbar button identifier Description

bullist

Formats the current selection as a bullet list.

numlist

Formats the current selection as a numbered list.

These toolbar buttons can be added to the editor using:

The Lists plugin provides the following menu items:

Menu item identifier Default Menu Location Description

listprops

Not applicable

Opens the List Properties dialog. Only works on numbered lists.

These menu items can be added to the editor using:

Commands

The Lists plugin provides the following TinyMCE commands.

Command Description

InsertDefinitionList

Inserts a definition list into the editor.

InsertOrderedList

Inserts an ordered list into the editor.

InsertUnorderedList

Inserts an unordered list into the editor.

mceListUpdate

Updates list attributes or styles.

mceListProps

Opens the list properties dialog.

RemoveList

Removes the list elements from the selection.
Examples
tinymce.activeEditor.execCommand('InsertDefinitionList', false, {
  'list-item-attributes': {class: 'mylistitemclass'},
  'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('InsertOrderedList', false, {
  'list-style-type': 'decimal',
  'list-item-attributes': {class: 'mylistitemclass'},
  'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('InsertUnorderedList', false, {
  'list-style-type': 'disc',
  'list-item-attributes': {class: 'mylistitemclass'},
  'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('mceListUpdate', false, {
  styles: { 'background-color': 'powderblue' }
});
tinymce.activeEditor.execCommand('mceListUpdate', false, {
  attrs: { contenteditable: 'false' }
});
tinymce.activeEditor.execCommand('mceListProps');
tinymce.activeEditor.execCommand('RemoveList');

Inline formatting

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.

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.