Lists

Bulleted and numbered lists for listing things. The listStyle menu changes the markers to a. b. c., i. ii. iii., Korean 가. 나. 다. and more.

createEditor('#editor', {
  toolbar: 'bulletList orderedList listStyle | indent outdent',
});

Making lists

• bulletList Ctrl+Shift+8, orderedList Ctrl+Shift+7. Press again to remove the list.
• At the start of an empty line, type - , * or + for bullets, 1. or 1) for numbers.
• Tab nests an item one level deeper, Shift+Tab moves it out. The indent / outdent buttons do the same.
• Enter on an empty item ends the list.

List style (listStyle)

Choices: ● disc, ○ circle, ■ square, 1. 2. 3., 01. 02., a. b. c., A. B. C., i. ii. iii., I. II. III., 가. 나. 다., ㄱ. ㄴ. ㄷ. A numbered style on a bulleted list turns it into a numbered list and the other way round. Outside a list, it starts a new list in that style.

listMenu puts bullets, numbers and checklist into one menu button, for narrow toolbars.

Presets and phones

• bulletList orderedList: first row of minimal, basic, board and full
• listStyle: only under ⋯ more in full
• On phones bullets are on the main row; numbered lists are under ⋯.

Saved HTML

The default markers (disc, 1. 2. 3.) are saved without a style; others use list-style-type. If your view page CSS resets list-style, the markers may not show.

<ul>
  <li>ID card</li>
  <li>Photo
    <ul><li>3×4 cm</li></ul>
  </li>
</ul>
<ol style="list-style-type: lower-alpha">
  <li>Fill in the form</li>
</ol>

API

editor.exec('bulletList');
editor.exec('listStyle', 'lower-alpha');

Options

For to-do lists see Checklists.