主题
列表
列表组件包含无序列表、有序列表与任务列表三种形态,支持相互转换与嵌套。斜杠命令、工具栏插入菜单与块句柄「转为列表」均可触发。
块菜单的「转为有序列表」用在标题上时不转列表,而是给标题开启编号(飞书的「标题编号」就是给标题挂有序列表),见标题 · 标题编号。
配置示例
ts
new LarkDoc({
element: '#editor',
toolbarKeys: ['insert'], // 列表入口在插入分组(别名 bulletList / orderedList / taskList)
content: '<ul><li><p>事项一</p></li><li><p>事项二</p></li></ul>',
})配置与用法
| 类型 | HTML | JSON 节点 | 入口 |
|---|---|---|---|
| 无序列表 | <ul><li> | bulletList / listItem | 插入菜单、/ 命令、块菜单「转为无序列表」 |
| 有序列表 | <ol><li> | orderedList / listItem | 插入菜单、/ 命令、块菜单「转为有序列表」 |
| 任务列表 | <ul data-type="taskList"> | taskList / taskItem | 插入菜单、/ 命令 |
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
features.insert | boolean | true | 插入菜单总开关(含列表入口)。 |
blockMenu.disabled: ['bulletList', 'orderedList', 'taskList'] | string[] | [] | 按动作禁用块菜单转换。 |
使用方式
Tab/Shift+Tab在列表内降级 / 升级层级。- 任务列表点击复选框切换完成态,状态随 JSON 保存(
checked属性)。 - 列表项内回车续项,空项回车退出列表。
编号与标记
列表标记(有序列表的序号、无序列表的圆点)由编辑器装饰层渲染,不用浏览器的 ::marker:飞书的序号就是排在正文前面的一段块级 UI,只有这样「句柄 → 折叠箭头 → 序号 → 正文」四者才能各就各位、互不重叠(浏览器原生 marker 在 padding-left 里,句柄一靠近就会把数字盖住)。
| 行为 | 规则 |
|---|---|
| 有序列表层级格式 | 第 1 层 1.、第 2 层 a.、第 3 层 i.,再深回到 1.(跟着层级循环换样式,不是复合数字) |
| 标题编号 | 另一套规则:1. / 1.1 / 1.1.1(章节号),见标题 · 标题编号 |
| 起始序号 | <ol start="5"> → 5. 6. 7.,嵌套列表各算各的 |
| 序号可点 | 和飞书一样,点有序序号弹出编号菜单(与标题编号共用):继续编号 / 重新开始编号 / 设置编号的值 |
| 单项重开 | 菜单写的起点存在 listItem.attrs.numberStart(等价 HTML <li value="N">),该项从该值起算、后面的兄弟接着数,不拆列表 |
| 跨列表接号 | 两个相邻的有序列表各自从 1. 起算时,点后一个列表首项的「继续编号」会给它打 ol.attrs.continueFrom(HTML data-continue-from="true"),接着前一个列表的末号排;前一个列表增删条目时后面自动跟着变(每帧现算,不写死数字)。中间隔着段落等其它块则视为两个独立列表,不接号 |
| 颜色 | 序号用飞书主色 #1456f0;圆点是中性灰,不抢视觉 |
| 缩进 | 每层 24px,由外层 <ol> / <ul> 的 padding-left 控制 |
| 是否进正文 | 不进:标记是 contentEditable=false 的装饰节点,getText() 与 getJSON() 都拿不到,复制粘贴也不会带上 |
行首快捷输入
在块的开头输入编号标记 + 空格,当前行转成编号块(和飞书一致,句子中间的 1. 仍是普通文本):
| 输入 | 结果 |
|---|---|
1. + 空格(空行) | 有序列表,从 1. 开始 |
3. + 空格(行首已有文字) | 有序列表,从 3. 开始,原文字变成列表项内容 |
1、 / 1。 / 1) + 空格 | 同上(中文输入法打出来的全角标记同样认) |
标题行 3. + 空格 | 标题保留,换成「标题 + 蓝色编号 3.」,文字不丢 |
代码块、列表项内部的 1. 不做转换;表格单元格里则会转成该单元格内的列表。