Skip to content

列表 ​

列表组件包含无序列表、有序列表与任务列表三种形态,支持相互转换与嵌套。斜杠命令、工具栏插入菜单与块句柄「转为列表」均可触发。

块菜单的「转为有序列表」用在标题上时不转列表,而是给标题开启编号(飞书的「标题编号」就是给标题挂有序列表),见标题 · 标题编号。

配置示例 ​

ts
new LarkDoc({
  element: '#editor',
  toolbarKeys: ['insert'],        // 列表入口在插入分组(别名 bulletList / orderedList / taskList)
  content: '<ul><li><p>事项一</p></li><li><p>事项二</p></li></ul>',
})

配置与用法 ​

类型HTMLJSON 节点入口
无序列表<ul><li>bulletList / listItem插入菜单、/ 命令、块菜单「转为无序列表」
有序列表<ol><li>orderedList / listItem插入菜单、/ 命令、块菜单「转为有序列表」
任务列表<ul data-type="taskList">taskList / taskItem插入菜单、/ 命令
配置项类型默认值说明
features.insertbooleantrue插入菜单总开关(含列表入口)。
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. 不做转换;表格单元格里则会转成该单元格内的列表。