Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Lists plugin

Normalizes list behavior between browsers.

Contribute to this page

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

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.

For example:

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:

Commands

The Lists plugin provides the following JavaScript 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.
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('RemoveList');

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.