Creating Lists

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

(Nesting bulleted list section modified)
(Final proof-reading)
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
Lists provide a way to structure text in a clear manner as well as group items that belong together. CKEditor lets you create two sorts of lists: bulleted (unordered) and numbered (ordered) lists.
+
{{#CUSTOMTITLE:Creating Lists}}
 +
__TOC__
 +
Lists provide a way to structure text in a clear manner as well as group items that belong together. CKEditor lets you create two types of lists: bulleted (unordered) and numbered (ordered) lists.
  
 
== Bulleted Lists ==
 
== Bulleted Lists ==
Line 5: Line 7:
  
 
=== Creating a Bulleted List ===
 
=== Creating a Bulleted List ===
To create a bulleted list, press the [[Image:CKEditor_bulletedlist.png|alt=Insert/Remove Bulleted List]] button on the toolbar. A default list marker will appear at the beginning of the line of text that contains the cursor and the line will become indented. If you want to add further list items, press ''Enter'' on your keyboard. The cursor will move to the next line with a list marker placed at its beginning.
+
To create a bulleted list, press the [[Image:CKEditor_bulletedlist.png|Insert/Remove Bulleted List]] button on the toolbar. A default list marker will appear at the beginning of the line of text that contains the cursor and the line will become indented. If you want to add further list items, press ''Enter'' on your keyboard. The cursor will move to the next line with a list marker placed at its beginning.
  
[[Image:CKEditor_bulletedlist_example.png|frame|center|alt=A bulleted list with default list markers inserted by CKEditor|A bulleted list with default list markers inserted by CKEditor]]
+
[[Image:CKEditor_bulletedlist_example.png|frame|center|A bulleted list with default list markers inserted by CKEditor]]
  
  
The list is continued automatically when you press ''Enter'' at the end of a line. If you want to suppress list creation, press ''Enter'' in an empty line with a list marker or click the [[Image:CKEditor_bulletedlist.png|alt=Insert/Remove Bulleted List]] button again. The cursor will then move to the next, unindented paragraph.
+
The list is continued automatically as long as you press ''Enter'' at the end of a line. If you want to suppress list creation, press ''Enter'' in an empty line with a list marker or click the [[Image:CKEditor_bulletedlist.png|Insert/Remove Bulleted List]] button again. The cursor will then move to the next, unindented paragraph.
  
Another method of adding a bulleted list is to select one or more paragraphs and press the [[Image:CKEditor_bulletedlist.png|alt=Insert/Remove Bulleted List]] button on the toolbar. Each paragraph will then become a separate list item.
+
Another method of adding a bulleted list is to select one or more paragraphs and press the [[Image:CKEditor_bulletedlist.png|Insert/Remove Bulleted List]] button on the toolbar. Each paragraph will then become a separate list item.
  
 
=== Bulleted List Properties ===
 
=== Bulleted List Properties ===
In CKEditor you can customize the appearance of the bulleted list and modify the list marker. In order to change the list style, open the list context menu by clicking the right mouse button on a list item, and choose the '''Bulleted List Properties''' menu option.
+
In CKEditor you can customize the appearance of the bulleted list and modify the list marker. In order to change the list style, open the list context menu by clicking the right mouse button on a list item or using the ''Menu/Application'' key on your keyboard, and choose the '''Bulleted List Properties''' menu option.
  
[[Image:CKEditor_bulletedlist_contextmenu.png|frame|center|alt=The bulleted list context menu with the Bulleted List Properties option|The bulleted list context menu with the Bulleted List Properties option]]
+
[[Image:CKEditor_bulletedlist_contextmenu.png|frame|center|The bulleted list context menu with the Bulleted List Properties option]]
  
  
 
The '''Bulleted List Properties''' dialog window lets you configure the appearance of the list marker.
 
The '''Bulleted List Properties''' dialog window lets you configure the appearance of the list marker.
  
[[Image:CKEditor_bulletedlist_properties.png|frame|center|alt=The Bulleted List Properties dialog window in CKEditor|The Bulleted List Properties dialog window in CKEditor]]
+
[[Image:CKEditor_bulletedlist_properties.png|frame|center|The Bulleted List Properties dialog window in CKEditor]]
  
  
Line 29: Line 31:
 
* '''Disc''' – the list marker becomes a round shape filled in the middle.
 
* '''Disc''' – the list marker becomes a round shape filled in the middle.
 
* '''Square''' – the list marker becomes a  four-sided shape filled in the middle.
 
* '''Square''' – the list marker becomes a  four-sided shape filled in the middle.
 
  
 
=== Nesting Bulleted Lists ===
 
=== Nesting Bulleted Lists ===
 
Sometimes one list level is not enough to represent a more complicated structure of items. This is why CKEditor lets you add multiple levels of nesting to your bulleted lists.
 
Sometimes one list level is not enough to represent a more complicated structure of items. This is why CKEditor lets you add multiple levels of nesting to your bulleted lists.
  
To create a nested bulleted list, use the '''Increase Indent''' feature of CKEditor. Place the cursor in the line that should start the nested list and press the [[Image:CKEditor_indent.png|alt=Increase Indent]] button on the toolbar. The list item will become indented and the list marker will change. The next item added to the list will have the same indentation as the previous one and thus become a part of the nested list.
+
To create a nested bulleted list, use the '''Increase Indent''' feature of CKEditor. Place the cursor in the line that should start the nested list and press the [[Image:CKEditor_indent.png|Increase Indent]] button on the toolbar. The list item will become indented and the list marker will change. The next item added to the list will have the same indentation as the previous one and thus become a part of the nested list.
 
 
[[Image:CKEditor_bulletedlist_nested_example.png|frame|center|alt=Nested bulleted lists added in CKEditor|Nested bulleted lists added in CKEditor]]
 
  
 +
[[Image:CKEditor_bulletedlist_nested_example.png|frame|center|Nested bulleted lists added in CKEditor]]
  
If you want to end the nested list and return to the previous indentation level, use the '''Decrease Indent''' feature of CKEditor. Place the cursor in the line that should be a continuation of the previous list and press the [[Image:CKEditor_outdent.png|alt=Decrease Indent]] button on the toolbar. The indentation of the list item will decrease and the list marker will change back to the marker for a list of a higher level.
 
  
 +
If you want to end the nested list and return to the previous indentation level, use the '''Decrease Indent''' feature of CKEditor. Place the cursor in the line that should be a continuation of the previous list and press the [[Image:CKEditor_outdent.png|Decrease Indent]] button on the toolbar. The indentation of the list item will decrease and the list marker will change back to the marker for a list of a higher level.
  
 
=== Removing a Bulleted List ===
 
=== Removing a Bulleted List ===
If you want to remove list formatting, leaving the text of the list items intact, select the list in the document and press the [[Image:CKEditor_bulletedlist.png|alt=Insert/Remove Bulleted List]] button on the toolbar. The list markers and indentation will be removed and each of the former list items will become a paragraph.
+
If you want to remove list formatting, leaving the text of the list items intact, select the list in the document and press the [[Image:CKEditor_bulletedlist.png|Insert/Remove Bulleted List]] button on the toolbar. The list markers and indentation will be removed and each of the former list items will become a paragraph.
 
 
[[Image:CKEditor_bulletedlist_removed.png|frame|center|alt=Bulleted list formatting removed from the document in CKEditor|Bulleted list formatting removed from the document in CKEditor]]
 
  
 +
[[Image:CKEditor_bulletedlist_removed.png|frame|center|Bulleted list formatting removed from the document in CKEditor]]
  
 
== Numbered Lists ==
 
== Numbered Lists ==
Numbered lists are useful when you want to group a number of items that need appear in a particular order. They are perfectly suited for lists of procedures or step-by-step instructions.
+
Numbered lists are useful when you want to group a number of items that need to appear in a particular order. They are perfectly suited for lists of procedures or step-by-step instructions.
  
 
=== Creating a Numbered List ===
 
=== Creating a Numbered List ===
To create a numbered list, press the [[Image:CKEditor_numberedlist.png|alt=Insert/Remove Numbered List]] button on the toolbar. A default numbered list marker will appear at the beginning of the line of text that contains the cursor and the line will become indented. If you want to add further list items, press ''Enter'' on your keyboard. The cursor will move to the next line with a list marker placed at its beginning.
+
To create a numbered list, press the [[Image:CKEditor_numberedlist.png|Insert/Remove Numbered List]] button on the toolbar. A default numbered list marker will appear at the beginning of the line of text that contains the cursor and the line will become indented. If you want to add further list items, press ''Enter'' on your keyboard. The cursor will move to the next line with a list marker placed at its beginning.
  
[[Image:CKEditor_numberedlist_example.png|frame|center|alt=A numbered list with default list markers inserted by CKEditor|A numbered list with default list markers inserted by CKEditor]]
+
[[Image:CKEditor_numberedlist_example.png|frame|center|A numbered list with default list markers inserted by CKEditor]]
  
  
The list is continued automatically when you press ''Enter'' at the end of a line. If you want to suppress list creation, press ''Enter'' in an empty line with a list marker or click the [[Image:CKEditor_numberedlist.png|alt=Insert/Remove Numbered List]] button again. The cursor will then move to the next, unindented paragraph.
+
The list is continued automatically as long as you press ''Enter'' at the end of a line. If you want to suppress list creation, press ''Enter'' in an empty line with a list marker or click the [[Image:CKEditor_numberedlist.png|Insert/Remove Numbered List]] button again. The cursor will then move to the next, unindented paragraph.
  
Another method of adding a numbered list is to select one or more paragraphs and press the [[Image:CKEditor_numberedlist.png|alt=Insert/Remove Numbered List]] button on the toolbar. Each paragraph will then become a separate list item.
+
Another method of adding a numbered list is to select one or more paragraphs and press the [[Image:CKEditor_numberedlist.png|Insert/Remove Numbered List]] button on the toolbar. Each paragraph will then become a separate list item.
  
 
=== Numbered List Properties ===
 
=== Numbered List Properties ===
In CKEditor you can customize the appearance of the numbered list, its starting value and the list marker. In order to change the list style, open the list context menu by clicking the right mouse button on a list item, and choose the '''Numbered List Properties''' menu option.
+
In CKEditor you can customize the appearance of the numbered list, its starting value, and the list marker. In order to change the list style, open the list context menu by clicking the right mouse button on a list item or using the ''Menu/Application'' key on your keyboard, and choose the '''Numbered List Properties''' menu option.
  
[[Image:CKEditor_numberedlist_contextmenu.png|frame|center|alt=The numbered list context menu with the Numbered List Properties option|The numbered list context menu with the Numbered List Properties option]]
+
[[Image:CKEditor_numberedlist_contextmenu.png|frame|center|The numbered list context menu with the Numbered List Properties option]]
  
  
The '''Numbered List Properties''' dialog window lets you configure the starting value and the list marker type. A numbered list can use decimal numbers, Roman numerals or letters of the alphabet, in either lower or upper case.  
+
The '''Numbered List Properties''' dialog window lets you configure the starting value and the list marker type. A numbered list can use decimal numbers, Roman numerals, or letters of the alphabet, in either lower or upper case.  
  
[[Image:CKEditor_numberedlist_properties.png|frame|center|alt=The Numbered List Properties dialog window in CKEditor|The Numbered List Properties dialog window in CKEditor]]
+
[[Image:CKEditor_numberedlist_properties.png|frame|center|The Numbered List Properties dialog window in CKEditor]]
  
 
Below is an overview of all '''Numbered List Properties''' dialog window elements:
 
Below is an overview of all '''Numbered List Properties''' dialog window elements:
Line 80: Line 79:
 
** '''Decimal''' (1, 2, 3, 4, 5, etc.)
 
** '''Decimal''' (1, 2, 3, 4, 5, etc.)
  
 +
=== Nesting Numbered Lists ===
 +
Sometimes one list level is not enough to represent a more complicated structure of items. This is why CKEditor lets you add multiple levels of nesting to your numbered lists.
 +
 +
To create a nested numbered list, use the '''Increase Indent''' feature of CKEditor. Place the cursor in the line that should start the nested list and press the [[Image:CKEditor_indent.png|Increase Indent]] button on the toolbar. The list item will become indented and the next item added to the list will have the same indentation as the previous one, thus becoming a part of the nested list.
 +
 +
[[Image:CKEditor_numberedlist_nested_example1.png|frame|center|Nested numbered lists added in CKEditor]]
 +
 +
 +
By default the nested numbered list will use the '''Decimal''' list marker type. To increase the readability of a  structure of nested numbered lists, you can assign each nesting level a different list marker. To achieve this, open the list context menu by clicking the right mouse button on a list item, and choose the '''Numbered List Properties''' menu option. The type selected from the '''Type''' drop-down list will be used for all list items at this nesting level.
 +
 +
[[Image:CKEditor_numberedlist_nested_example2.png|frame|center|Nested numbered lists with different list markers added in CKEditor]]
 +
 +
 +
If you want to end a nested list and return to the previous indentation level, use the '''Decrease Indent''' feature of CKEditor. Place the cursor in the line that should be a continuation of the previous list, and press the [[Image:CKEditor_outdent.png|Decrease Indent]] button on the toolbar. The indentation of the list item will decrease and the list marker will change back to the marker for a list of a higher level.
  
 
=== Removing a Numbered List ===
 
=== Removing a Numbered List ===
If you want to remove list formatting, leaving the text of the list items intact, select the list in the document and click the [[Image:CKEditor_numberedlist.png|alt=Insert/Remove Numbered List]] button on the toolbar. The list markers and indentation will be removed and each list item will become a separate paragraph.
+
If you want to remove list formatting, leaving the text of the list items intact, select the list in the document and click the [[Image:CKEditor_numberedlist.png|Insert/Remove Numbered List]] button on the toolbar. The list markers and indentation will be removed and each list item will become a separate paragraph.
 +
 
 +
[[Image:CKEditor_numberedlist_removed.png|frame|center|Numbered list formatting removed from the document in CKEditor]]
 +
 
 +
 
 +
== Mixed List Types ==
 +
For a particularly complicated structure of items you may want to combine bulleted and numbered lists of various indentation levels. Experiment with the [[Image:CKEditor_bulletedlist.png|Insert/Remove Bulleted List]], [[Image:CKEditor_numberedlist.png|Insert/Remove Numbered List]], [[Image:CKEditor_indent.png|Increase Indent]] and [[Image:CKEditor_outdent.png|Decrease Indent]] buttons to create a combination that accurately represents your data.
  
[[Image:CKEditor_numberedlist_removed.png|frame|center|alt=Numbered list formatting removed from the document in CKEditor|Numbered list formatting removed from the document in CKEditor]]
+
[[Image:CKEditor_mixedlist_example.png|frame|center|A complicated structure of nested bulleted and numbered lists]]

Latest revision as of 12:47, 13 December 2010

Lists provide a way to structure text in a clear manner as well as group items that belong together. CKEditor lets you create two types of lists: bulleted (unordered) and numbered (ordered) lists.

Bulleted Lists

Bulleted lists are useful when you want to group a number of items that do not need to appear in any particular order.

Creating a Bulleted List

To create a bulleted list, press the Insert/Remove Bulleted List button on the toolbar. A default list marker will appear at the beginning of the line of text that contains the cursor and the line will become indented. If you want to add further list items, press Enter on your keyboard. The cursor will move to the next line with a list marker placed at its beginning.

A bulleted list with default list markers inserted by CKEditor


The list is continued automatically as long as you press Enter at the end of a line. If you want to suppress list creation, press Enter in an empty line with a list marker or click the Insert/Remove Bulleted List button again. The cursor will then move to the next, unindented paragraph.

Another method of adding a bulleted list is to select one or more paragraphs and press the Insert/Remove Bulleted List button on the toolbar. Each paragraph will then become a separate list item.

Bulleted List Properties

In CKEditor you can customize the appearance of the bulleted list and modify the list marker. In order to change the list style, open the list context menu by clicking the right mouse button on a list item or using the Menu/Application key on your keyboard, and choose the Bulleted List Properties menu option.

The bulleted list context menu with the Bulleted List Properties option


The Bulleted List Properties dialog window lets you configure the appearance of the list marker.

The Bulleted List Properties dialog window in CKEditor


The Type drop-down list contains the following options:

  • Circle – the list marker becomes a round shape that is empty in the middle.
  • Disc – the list marker becomes a round shape filled in the middle.
  • Square – the list marker becomes a four-sided shape filled in the middle.

Nesting Bulleted Lists

Sometimes one list level is not enough to represent a more complicated structure of items. This is why CKEditor lets you add multiple levels of nesting to your bulleted lists.

To create a nested bulleted list, use the Increase Indent feature of CKEditor. Place the cursor in the line that should start the nested list and press the Increase Indent button on the toolbar. The list item will become indented and the list marker will change. The next item added to the list will have the same indentation as the previous one and thus become a part of the nested list.

Nested bulleted lists added in CKEditor


If you want to end the nested list and return to the previous indentation level, use the Decrease Indent feature of CKEditor. Place the cursor in the line that should be a continuation of the previous list and press the Decrease Indent button on the toolbar. The indentation of the list item will decrease and the list marker will change back to the marker for a list of a higher level.

Removing a Bulleted List

If you want to remove list formatting, leaving the text of the list items intact, select the list in the document and press the Insert/Remove Bulleted List button on the toolbar. The list markers and indentation will be removed and each of the former list items will become a paragraph.

Bulleted list formatting removed from the document in CKEditor

Numbered Lists

Numbered lists are useful when you want to group a number of items that need to appear in a particular order. They are perfectly suited for lists of procedures or step-by-step instructions.

Creating a Numbered List

To create a numbered list, press the Insert/Remove Numbered List button on the toolbar. A default numbered list marker will appear at the beginning of the line of text that contains the cursor and the line will become indented. If you want to add further list items, press Enter on your keyboard. The cursor will move to the next line with a list marker placed at its beginning.

A numbered list with default list markers inserted by CKEditor


The list is continued automatically as long as you press Enter at the end of a line. If you want to suppress list creation, press Enter in an empty line with a list marker or click the Insert/Remove Numbered List button again. The cursor will then move to the next, unindented paragraph.

Another method of adding a numbered list is to select one or more paragraphs and press the Insert/Remove Numbered List button on the toolbar. Each paragraph will then become a separate list item.

Numbered List Properties

In CKEditor you can customize the appearance of the numbered list, its starting value, and the list marker. In order to change the list style, open the list context menu by clicking the right mouse button on a list item or using the Menu/Application key on your keyboard, and choose the Numbered List Properties menu option.

The numbered list context menu with the Numbered List Properties option


The Numbered List Properties dialog window lets you configure the starting value and the list marker type. A numbered list can use decimal numbers, Roman numerals, or letters of the alphabet, in either lower or upper case.

The Numbered List Properties dialog window in CKEditor

Below is an overview of all Numbered List Properties dialog window elements:

  • Start – the starting value for the list that will be used in the first list item.
  • Type – the type of the list marker. The following options are available from the drop-down list:
    • Lower Roman (i, ii, iii, iv, v, etc.)
    • Upper Roman (I, II, III, IV, V, etc.)
    • Lower Alpha (a, b, c, d, e, etc.)
    • Upper Alpha (A, B, C, D, E, etc.)
    • Decimal (1, 2, 3, 4, 5, etc.)

Nesting Numbered Lists

Sometimes one list level is not enough to represent a more complicated structure of items. This is why CKEditor lets you add multiple levels of nesting to your numbered lists.

To create a nested numbered list, use the Increase Indent feature of CKEditor. Place the cursor in the line that should start the nested list and press the Increase Indent button on the toolbar. The list item will become indented and the next item added to the list will have the same indentation as the previous one, thus becoming a part of the nested list.

Nested numbered lists added in CKEditor


By default the nested numbered list will use the Decimal list marker type. To increase the readability of a structure of nested numbered lists, you can assign each nesting level a different list marker. To achieve this, open the list context menu by clicking the right mouse button on a list item, and choose the Numbered List Properties menu option. The type selected from the Type drop-down list will be used for all list items at this nesting level.

Nested numbered lists with different list markers added in CKEditor


If you want to end a nested list and return to the previous indentation level, use the Decrease Indent feature of CKEditor. Place the cursor in the line that should be a continuation of the previous list, and press the Decrease Indent button on the toolbar. The indentation of the list item will decrease and the list marker will change back to the marker for a list of a higher level.

Removing a Numbered List

If you want to remove list formatting, leaving the text of the list items intact, select the list in the document and click the Insert/Remove Numbered List button on the toolbar. The list markers and indentation will be removed and each list item will become a separate paragraph.

Numbered list formatting removed from the document in CKEditor


Mixed List Types

For a particularly complicated structure of items you may want to combine bulleted and numbered lists of various indentation levels. Experiment with the Insert/Remove Bulleted List, Insert/Remove Numbered List, Increase Indent and Decrease Indent buttons to create a combination that accurately represents your data.

A complicated structure of nested bulleted and numbered lists
This page was last edited on 13 December 2010, at 12:47.