tiptap编辑器保存时如何正确获取HTML内容？

博主福萍提问于 2026-02-16 10:02:38 阅读 12

交互

我用tiptap搭建了一个富文本编辑器，想在表单提交时获取编辑器内容。按照文档用了editor.getHTML()，但控制台提示editor is not a function。

初始化代码是这样的：


<div id="editor"></div>
<script>
const editor = new Tiptap({
  element: document.querySelector('#editor'),
  extensions: [
    Heading,{...},
  ],
})
document.querySelector('button').onclick = () => {
  console.log(editor.getHTML()) // 这里报错
}
</script>

尝试过把方法改成getContent().toHTML()也不行，控制台显示getContent is not defined。是不是初始化方式有问题？或者需要额外引入插件？

我来解答赞 3 收藏

反馈

2 条解答

Prog.好妍 Lv1

问题出在初始化方式上，Tiptap 的核心类名应该是 Editor 而不是 Tiptap，改一下初始化代码试试看：

import { Editor } from '@tiptap/core'

import StarterKit from '@tiptap/starter-kit'



const editor = new Editor({

  element: document.querySelector('#editor'),

  extensions: [

    StarterKit,

  ],

})



document.querySelector('button').onclick = () => {

  console.log(editor.getHTML())

}

如果还报错，检查一下依赖版本，确保安装的是 @tiptap/core 和 @tiptap/starter-kit，老版本的 API 可能不一样。

2026-02-18 19:11

a'ゞ晓燕 Lv1

看起来是初始化的时候变量名和方法调用有点问题。一般这样处理：

先确认你用的是Tiptap 2.x版本，因为1.x和2.x的API差别挺大的。按照你的代码，应该是2.x的写法，但调用方式不太对。

正确的做法是这样：

import { Editor } from '@tiptap/core'

import StarterKit from '@tiptap/starter-kit'



const editor = new Editor({

  element: document.querySelector('#editor'),

  extensions: [

    StarterKit,

  ],

})



document.querySelector('button').onclick = () => {

  if (editor) {

    console.log(editor.getHTML())

  }

}

几个关键点说一下：
首先确保引入了Editor和StarterKit，StarterKit是个扩展包，包含了常用的富文本功能。
其次要注意editor实例要判断是否存在，避免空指针异常。
最后getHTML()确实是获取HTML内容的正确方法，不用加其他插件。

如果还是报错，可能是Tiptap版本不对，建议检查package.json，确保安装的是2.x版本。我之前也被这个坑过，1.x版本的API完全不同。

顺便吐槽下，Tiptap的文档虽然看着挺全，但版本差异确实容易让人踩坑。

2026-02-16 10:03