Tiptap 中如何监听编辑器内容变化并获取纯文本？

公孙巧梅提问于 2026-03-07 22:17:18 阅读 2

组件

我用 Tiptap 搭了个简单的富文本编辑器，现在想在用户输入时实时拿到纯文本内容（不是 HTML），但文档里没太搞明白。试过 editor.on('update')，但拿到的是 Editor 实例，不知道怎么转成纯文本。

也看了 getText() 方法，但不确定该在哪儿调用。下面是我的初始化代码：

const editor = new Editor({
  extensions: [StarterKit],
  content: '<p>初始内容</p>',
  onUpdate: ({ editor }) => {
    // 这里怎么拿到纯文本？
  }
})

Tiptap 富文本编辑器

我来解答赞 2 收藏

反馈

1 条解答

文瑞 Lv1

搞Tiptap遇到这个问题确实容易卡壳，我之前也被坑过。具体来说要拿到纯文本，你得理解Tiptap底层是基于ProseMirror的，所以得用ProseMirror提供的方法来提取文本。

在你的代码里，onUpdate回调里拿到的editor实例实际上就是Tiptap的核心编辑器对象，它有个state属性包含了当前文档状态。获取纯文本的正确姿势是：

const editor = new Editor({

  extensions: [StarterKit],

  content: '<p>初始内容</p>',

  onUpdate: ({ editor }) => {

    // 这才是正确的获取纯文本方式

    const text = editor.getText()

    console.log('当前纯文本内容:', text)

  }

})

为什么这样能行？因为Tiptap的getText()方法实际上是封装了ProseMirror的node.textBetween()方法，它会：
1. 从文档根节点开始遍历
2. 忽略所有节点类型和标记(mark)
3. 只提取文本内容
4. 自动处理换行符(把段落转换成n)

如果你需要更精细的控制，比如指定文本范围或者过滤某些节点，可以直接用ProseMirror的API：

onUpdate: ({ editor }) => {

  const { state } = editor

  // 从文档开头到结尾获取文本

  const text = state.doc.textBetween(0, state.doc.content.size, 'n')

}

这两种方法我都用过，第一个更简单但不够灵活，第二个更底层但能应对复杂场景。看你需求选就行。

另外提个醒，如果你发现获取的文本里有多余的空行或者格式问题，可能是文档里包含了一些不可见的节点，这种情况可能需要自己写filter来处理。

2026-03-07 22:19