Tiptap插入内容后光标跳到末尾怎么解决？

W″梦轩提问于 2026-02-13 18:21:24 阅读 17

组件

我在用Tiptap做评论区编辑器时遇到个问题，每次通过按钮插入时间戳后光标都会跳到最后，导致用户继续输入很不方便。试过在插入代码里加editor.chain().focus()但好像没用，控制台还报错”Transaction is not running”。


<template>
  <button @click="insertTimestamp">插入时间</button>
  <tiptap-vuetify ...></tiptap-vuetify>
</template>

<script>
methods: {
  insertTimestamp() {
    this.editor.chain().focus().insertContent(当前时间：${new Date().toLocaleString()}).run()
  }
}
</script>

是不是应该用dom操作直接定位光标？或者Tiptap有专门处理这种情况的方法？折腾了好久还是没找到正确姿势…

Tiptap 富文本编辑器

我来解答赞 4 收藏

反馈

1 条解答

Designer°玉娅 Lv1

你得在插入内容的时候保存光标位置，我一般直接用 editor.commands.insertContentAt 这个方法，它能指定位置插入而且不会乱跳。

insertTimestamp() {

  const { from, to } = this.editor.state.selection

  this.editor.chain().focus().insertContentAt({ from, to }, 当前时间：${new Date().toLocaleString()}).run()

}

别折腾 DOM 操作了，Tiptap 自带的方法足够用了，省事还靠谱。

2026-02-14 09:24