如何使用TipTap insertContent插入无序列表？求正确对象格式

正确的插入代码示例 #

要插入无序列表，必须遵循TipTap的节点层级规则：bulletList 的子节点是 listItem，而 listItem 必须嵌套 paragraph 节点，最终在 paragraph 里放 text 节点承载文本内容。正确代码如下：

editor.commands.insertContent({
  type: 'bulletList',
  content: [
    {
      type: 'listItem',
      content: [
        {
          type: 'paragraph',
          content: [
            {
              type: 'text',
              text: '第一个列表项'
            }
          ]
        }
      ]
    },
    {
      type: 'listItem',
      content: [
        {
          type: 'paragraph',
          content: [
            {
              type: 'text',
              text: '第二个列表项'
            }
          ]
        }
      ]
    }
  ]
})

你尝试代码的问题 #

你写的代码存在两处明显问题：

• 语法错误：content: 'some string, 缺少闭合引号
• 结构错误：listItem 的子节点不能直接放字符串，TipTap要求文本必须放在 text 节点中，且上层需要用 paragraph 这类块级节点包裹

如何确定节点的结构 #

有两种实用方法可以快速确认任意节点的正确结构：

1. 导出现有编辑器的JSON结构
   在编辑器里手动创建一个无序列表，然后调用 editor.getJSON() 方法，就能得到该列表对应的完整JSON结构，直接参考这个结构写插入代码即可。
2. 查看官方节点的Schema定义
   每个TipTap节点都有明确的Schema规则，比如 bulletList 仅允许 listItem 作为子节点，listItem 允许 paragraph 等块级节点作为子节点，查看官方文档中对应节点的Schema部分，就能明确层级关系和允许的子节点类型。

内容的提问来源于stack exchange，提问作者user13653