CKEditor 生态系统文档
Search
Contribute to this guide
主页/CKEditor 5/功能

指南有序和无序列表

列表功能允许您创建有序（编号）和无序（项目符号）列表。 它们独特之处在于您可以将任何内容放置在每个列表项中（包括段落和表格等块元素），同时保留编号和缩进的连续性。

从版本 41.0.0 开始，CKEditor 5 的列表支持插件已更改。 您可以在 更新至 CKEditor 41.0.0 指南中详细了解此更改。

# 演示

使用下面的编辑器查看列表功能的实际操作。 您可以使用工具栏按钮插入有序 插入有序列表 和无序列表 插入无序列表。

您还可以使用 自动格式化功能 识别的 Markdown 代码

  • 以 * 或 - 后跟空格开头的一行表示项目符号列表。
  • 以 1. 或 1) 后跟空格开头的一行表示编号列表。

今年夏天必去的五个地方

... 而且要控制预算。

  1. 西班牙大加那利岛

    大加那利岛是一个受欢迎的旅游目的地。 该岛屿经常被称为“缩微版的大陆”。 这是因为它提供了各种气候和景观，从金色的沙滩到岩石峡谷和白色沙丘，再到迷人的村庄。 在 2010 年代中期，每年有超过 350 万游客访问大加那利岛。

  2. 意大利佛罗伦萨

    佛罗伦萨建于公元前 59 年，由尤利乌斯·凯撒本人建立，它得名于围绕定居点的两条河流。 由于几个世纪的历史，托斯卡纳的首府为渴望观光的游客提供了许多值得一看的地方。 一些最有趣的地方包括

    佛罗伦萨也被认为是世界上 15 个顶级时尚之都之一。

  3. 葡萄牙波尔图

    波尔图位于葡萄牙北部杜罗河河口，是该国第二大城市。 它被认为是最古老的欧洲中心之一，并在 1996 年被列为世界遗产城市历史中心时得到认可。

    波尔图旧城区是联合国教科文组织世界遗产。

    在 2014 年和 2017 年，波尔图被最佳欧洲目的地机构评选为最佳欧洲目的地。 该城市也是波尔图建筑学院的所在地，该学院是世界上最负盛名的建筑学院之一。

  4. 匈牙利布达佩斯

    匈牙利的首都，一个跨越多瑙河的温泉城市，充满了罗马、土耳其和欧洲的历史和文化遗产。 温泉、风景如画的河流和格勒德山城堡只是在计划您前往匈牙利的旅行时值得考虑的几件事。

    他们说，当然，布达佩斯很美。 但实际上它美得令人难以置信。 - 安东尼·波登

  5. 希腊伯罗奔尼撒半岛

    伯罗奔尼撒半岛在史前时代就已经有人居住。在青铜器时代，第一个欧洲高度发达的文明——迈锡尼文明——在那里兴起。罗马、拜占庭、斯拉夫和奥斯曼统治对这个地方留下了显著的印记，至今仍有许多值得参观的建筑和文化遗迹。

本演示仅展示了有限的功能。访问 功能丰富的编辑器示例 以查看更多实际操作。

# 列表属性

除了创建有序和无序列表的基本功能外，CKEditor 5 还提供格式化工具，让您能够控制列表。您可以启用一些功能，例如为列表标记添加更多样式、设置起始索引或反转列表顺序，这些操作可以单独进行，也可以一次性全部完成。查看下面的各个演示，或者在 功能丰富的编辑器示例 中查看所有列表属性协同工作。

# 列表样式

列表样式功能为列表项标记引入了一些更多样式。当 启用 时，它会为无序列表添加 3 种样式，为有序列表添加 6 种样式供您选择。用户可以通过下拉菜单设置或更改列表样式。单击工具栏中相应列表按钮旁边的箭头时，它会打开。

# 演示

在下面的编辑器中，使用有序 插入有序列表 或无序列表下拉菜单 插入无序列表 为每个列表选择所需的标记类型。

历史和现代载人航天器

  1. 联盟号（苏联/俄罗斯）
    1. 7K 初期型号（全部退役）
      1. 7K-OK
      2. 7KT-OK
      3. 7K-T
      4. 7K-TM
    2. 联盟号 T（退役）
    3. 联盟号 TM 及其后续改进型号（退役）
    4. 联盟号 MS
  2. STS 轨道器（美国；全部退役）
    1. 哥伦比亚号
    2. 挑战者号
    3. 发现号
    4. 亚特兰蒂斯号
    5. 奋进号
  3. SpaceX 载人龙飞船（美国）
  4. 神舟（中国）
以粗体显示的项目表示截至 2022 年仍在使用的航天器。

# 列表起始索引

列表起始索引功能允许用户选择有序列表的起始点。默认情况下，这将是 1（或 A，或 I - 请参阅 列表样式部分）。但是，有时您可能希望从其他数字或字母开始列表。

当此功能 启用 时，有序列表工具栏按钮中会提供额外的下拉选项。借助它，用户可以设置或更改起始标记。

# 演示

在下面的编辑器中，请注意第二个列表中的排序是如何继续的。要实现示例中所有航天器的连续编号，请转到最后一个列表的第一个项目。然后使用有序列表 插入有序列表 下拉输入字段设置起始索引。

载人航天器列表

苏联和俄罗斯航天器

  1. 东方号
  2. 上升号
  3. 联盟号
  4. 进步号（货运）

美国航天器

  1. 水星号
  2. 双子星号
  3. 阿波罗号
  4. 航天飞机
  5. 龙飞船

中国航天器

  1. 神舟号
  2. 天舟号（货运）

# 反向列表

反向列表功能允许用户反转列表的编号顺序，将其从升序更改为降序。这在倒计时和需要以反向顺序（例如，在拆卸说明中）重现步骤的事项清单中很有用。

当此功能 启用 时，有序列表工具栏按钮中会提供额外的下拉开关。借助它，用户只需单击一下即可反转列表顺序。

# 演示

单击第二个列表，并使用有序列表 插入有序列表 下拉开关选择是否反转编号顺序。

更换任天堂 Game Boy 的屏幕

Game Boy Color, a spudger and a triwing screwdriver.

拆卸游戏机

  1. 从插槽中取出游戏卡带。打开电池仓并取出电池。
  2. 卸下位于后盖顶部、中间以及电池仓内部的六颗三翼螺丝（需要使用 Y 型螺丝刀）。
  3. 将前后盖分离。格外小心，不要拉扯连接两部分的排线。小心地取下排线。
  4. 卸下将主板固定到前盖的十颗十字螺丝。小心地将主板从机壳中取出。
  5. 取下主板背面的三个塑料夹，并卸下屏幕下方正面上的两颗十字螺丝。
  6. 从主板上拆卸显示器连接器。

重新组装游戏机

  1. 将显示器连接器焊接回主板。
  2. 固定屏幕下方的两颗螺丝，并将三个塑料夹重新安装回主板背面
  3. 小心地将主板放入前盖，并拧紧将主板固定到位的十颗十字螺丝。
  4. 将主排线重新连接到后盖，并将两个盖子合在一起。
  5. 拧紧电池仓内部和后盖上的六颗三翼螺丝。
  6. 重新装入三节 AA 电池，合上电池仓盖，并插入您喜欢的游戏卡带玩耍！

您可以在 功能丰富的编辑器 和 文档编辑器 示例中看到所有列表属性协同工作。

# 安装

⚠️ 新的导入路径

从 版本 42.0.0 开始，我们更改了导入路径格式。本指南使用新的更短的格式。如果您使用的是旧版本的 CKEditor 5，请参考 旧版设置中的包 指南。

List 插件为 CKEditor 5 提供了 有序（编号）和无序（项目符号）功能。 其他列表属性（例如列表标记样式、起始索引或反转列表顺序）由 ListProperties 插件提供。

# 列表功能

在 安装编辑器 后，将该功能添加到您的插件列表和工具栏配置中

import { List } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ List, /* ... */ ],
        toolbar: [ 'bulletedList', 'numberedList', /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 列表属性

在 安装编辑器 后，将 ListProperties 添加到您的插件列表和工具栏配置中

要启用列表属性的选定子功能，请将它们的配置添加到您的编辑器中。为要启用的每个功能设置 true

import { ListProperties } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ ListProperties, /* ... */ ],
        toolbar: [ 'bulletedList', 'numberedList', /* ... */ ],
        list: {
            properties: {
                styles: true,
                startIndex: true,
                reversed: true
            }
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

ListProperties 功能会覆盖 ListUI 中的 UI 按钮实现。

这些 CKEditor 5 功能提供类似的功能

  • 待办事项列表 – 创建带有标签的交互式复选框列表。
  • 多级列表 – 多级列表允许用户为列表的每一级设置不同的标记（符号、文本或数字）。
  • 块缩进 – 设置段落、标题和列表等文本块的缩进。
  • 自动格式化 – 使用 Markdown 代码即时格式化文本。

# 通用 API

List 插件注册

ListProperties 插件注册

  • listStyle 命令。它接受要设置的列表样式的 type。如果未设置，它将使用默认标记（通常为十进制）。

    editor.execute( 'listStyle', { type: 'lower-roman' } );

    可用的类型为

    • 对于项目符号列表：'disc'、'circle' 和 'square'。
    • 对于编号列表：'decimal'、'decimal-leading-zero'、'lower-roman'、'upper-roman'、'lower-latin' 和 'upper-latin'。

  • listStart 命令。它是一个数字，默认为 1（表示列表从 1 开始）。如果已启用，它接受 start 属性的数值。

    editor.execute( 'listStart', { startIndex: 3 } );

  • listReversed 命令。它是一个布尔值，默认为 false（表示列表顺序为升序）。

    editor.execute( 'listReversed', { reversed: true } );

  • numberedList UI 拆分按钮。它会覆盖 List 插件注册的 UI 按钮。

  • bulletedList UI 拆分按钮。它会覆盖 List 插件注册的 UI 按钮。

# 贡献

该功能的源代码可在 GitHub 上获得：https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-list.