探索 Tiptap V3 的最新功能

insertContentAt 命令

insertContentAt 将在给定位置或范围插入一个 HTML 字符串或节点。如果给定了范围,新内容将替换该范围内的内容。

参数

position: number | Range

内容将被插入的位置或范围。

value: Content

要插入的内容。可以是纯文本、HTML 字符串或 JSON 节点。

options: Record<string, any>

  • updateSelection: 控制选择是否移动到新插入的内容。
  • parseOptions: 传入的内容将由 ProseMirror 解析。要挂钩解析,您可以传递 parseOptions,它们将由 ProseMirror 处理。

使用 insertContentAt 命令

// 纯文本
editor.commands.insertContentAt(12, '示例文本')

// 纯文本,替换范围
editor.commands.insertContentAt({ from: 12, to: 16 }, '示例文本')

// HTML
editor.commands.insertContentAt(12, '<h1>示例文本</h1>')

// 带修剪空格的 HTML
editor.commands.insertContentAt(12, '<p>你好,世界</p>', {
  updateSelection: true,
  parseOptions: {
    preserveWhitespace: 'full',
  },
})

// JSON/节点
editor.commands.insertContentAt(12, {
  type: 'heading',
  attrs: {
    level: 1,
  },
  content: [
    {
      type: 'text',
      text: '示例文本',
    },
  ],
})

// 同时插入多个节点
editor.commands.insertContentAt(12, [
  {
    type: 'paragraph',
    content: [
      {
        type: 'text',
        text: '第一段',
      },
    ],
  },
  {
    type: 'paragraph',
    content: [
      {
        type: 'text',
        text: '第二段',
      },
    ],
  },
])