本文介绍如何使用 npm 包 @ckeditor/ckeditor5-list 实现内容列表功能，包括基本功能、进阶使用和常见问题解答，旨在为前端初学者提供指导和参考。
什么是 @ckeditor/ckeditor5-list？
@ckeditor/ckeditor5-list 是 CKEditor 5 编辑器的一个 npm 包，可用于在网页中创建、编辑和管理内容列表，支持有序列表（
- ）和无序列表（
- Tab：缩进当前列表项
- Shift+Tab：取消缩进当前列表项
- Enter：在当前列表项下方添加新的列表项
- Shift+Enter：在当前列表项下方添加新的文本段落
- 删除键：删除当前列表项
- 定义样式类
- 设置列表项 class 属性
- 控制样式生效范围
- ）两种类型。
使用 @ckeditor/ckeditor5-list，我们可以轻松地实现富文本编辑器中的列表功能，用户可以通过操作按钮或快捷键方便地添加、移动和删除列表项，同时还支持自定义列表样式和图标。
基本功能
安装和引入
首先，我们需要在项目中安装 @ckeditor/ckeditor5-list 包，可以使用 npm 命令进行安装：
npm i @ckeditor/ckeditor5-list
安装完成后，在需要使用列表功能的页面或组件中，按照以下方式引入列表插件：
import List from '@ckeditor/ckeditor5-list/src/list';
初始化编辑器
为了使用列表插件，我们需要先初始化 CKEditor 编辑器，并加入列表插件，示例如下：
-- -------------------- ---- -------
------ ------------- ---- -------------------------------------------------------
------ ---- ---- ------------------------------------
-------------
-------- ----------------------- --------- -- -
-------- - ---- --
-------- - ------- ------- ------ -
- -
------ ------ -- -
------------ ------- --- ------------- ------ --
- -
------- ----- -- -
-------------- ----------- --
- --在上述代码中，我们使用 ClassicEditor.create() 方法初始化 CKEditor 编辑器，plugins 参数传入需要使用的插件，toolbar 参数设置编辑器工具栏中的按钮。
添加列表
在编辑器中添加列表非常简单，只要选中需要添加列表的文本段落（如下图），然后点击编辑器工具栏中的“有序列表”或“无序列表”按钮，即可添加对应类型的列表。
除了使用按钮，也可以通过快捷键 Ctrl+Shift+7（有序列表）和 Ctrl+Shift+8（无序列表）快速添加列表。
操作列表项
在 CKEditor 中，使用鼠标或方向键可以方便地操作列表项，包括添加、删除、移动、缩进等操作。
以下是一些常用的列表操作快捷键，供参考：
进阶使用
除了基本的列表功能，@ckeditor/ckeditor5-list 还支持更多的高级用法，例如自定义列表样式、控制列表深度、禁用列表功能等。
自定义列表样式
通过自定义样式，我们可以为列表项添加图标、调整文本样式、设置间距等，让列表更加美观、易读。
在 CKEditor 中，我们可以通过 CSS 样式表的方式自定义列表样式，具体操作如下：
首先，我们需要定义一个 CSS 样式类，用于描述列表项的样式。例如，以下样式类定义了无序列表项的样式，包括方框图标、加粗字体、14px 字号和 20px 左右外边距：
.my-unordered-list-item {
list-style-type: square;
font-weight: bold;
font-size: 14px;
margin-left: 20px;
}接下来，我们需要在需要添加自定义样式的列表项中，设置 class 属性为定义的样式类名。例如，以下 HTML 代码中，第一个无序列表项使用了刚刚定义的样式类：
<ul>
<li class="my-unordered-list-item">第一行文本</li>
<li>第二行文本</li>
<li>第三行文本</li>
</ul>最后，我们需要通过 CKEditor 的配置选项，控制定义的样式在哪些列表中生效。具体操作如下：
-- -------------------- ---- -------
----- ------ - -------------
-------- ----------------------- --------- -- -
-------- - ---- --
-------- - ------- ------- ------ --
----- -
-- ---------
------- -
-------------- -
----- --------------
-------- -----
----------- -
------ ----------------------
-
-
--
-- ---------
-------------- -
-------------- -
----- --------------
-------- -----
----------- -
------ ----------------------
-
-
--
-- --------
------ ---------------- ---------------
-
- -在上述代码中，我们通过 list.styles 和 list.orderedStyles 配置项，分别定义了无序列表项和有序列表项使用的自定义样式，包括样式名称、要应用的元素和 class 属性。
同时，我们还通过 list.types 控制项，指定了自定义样式要应用到的列表类型，例如 'numberedList' 表示应用到有序列表中。
控制列表深度和缩进
CKEditor 中的列表插件默认支持多级列表，即一个列表项下方可以再添加一个子列表（如下图），通过缩进控制层级。
在操作层级时，我们可以通过 Tab 和 Shift+Tab 快捷键来进行缩进和取消缩进，在缩进的基础上可以添加新的子列表项。
如果只需要单级列表，则可以通过以下配置项关闭多级列表功能：
-- -------------------- ---- -------
----- ------ - -------------
-------- ----------------------- --------- -- -
-------- - ---- --
-------- - ------- ------- ------ --
----- -
-- ------
------------ -----
-
- -在上述代码中，我们通过 list.allowLevels 控制项，将多级列表功能设置为 false，即禁用多级列表。
禁用列表功能
有时候，我们可能需要禁用 CKEditor 中的列表功能，例如在只读模式下或非列表内容的部分。
可以通过以下代码禁用 @ckeditor/ckeditor5-list 插件：
-- -------------------- ---- -------
----- ------ - -------------
-------- ----------------------- --------- -- -
-------- -
-- ------
----- -
-------- -----
-
--
-------- - ------- ------ -
- -在上述代码中，我们通过 List.enabled 控制项，将列表插件设置为禁用状态，其他插件正常使用。
常见问题解答
1. 如何获取编辑器中的列表内容？
可以使用 CKEditor 提供的 getData() 方法，获取编辑器中包括列表在内的所有文本内容。示例如下：
const editorData = editor.getData();
2. 如何通过 JS 代码控制列表项？
可以使用 CKEditor 提供的 model API，通过 JS 代码控制列表项的内容、层级、样式等，具体操作方法可参考 CKEditor 官方文档。
3. 如何扩展列表插件功能？
可以通过继承 List 基础类，编写自定义列表插件并对其进行配置，以实现更多的扩展功能，具体操作方法可参考 CKEditor 文档。
结语
本文介绍了使用 @ckeditor/ckeditor5-list 实现内容列表功能的基本使用方法和进阶操作，包括列表添加、操作、自定义样式、控制深度和禁用等方面的内容，旨在为前端初学者提供指导和参考。
希望本文能对读者在实战中使用 CKEditor 编辑器和列表插件有所帮助，同时也欢迎读者在评论中留言，分享自己的见解和使用心得。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3208873b0ab45f74a8bd3e