Tiptap History 历史记录

Tiptap History 扩展提供历史记录支持,将记录文档的所有操作更改，可以撤回操作也可以重新开始。

Install 安装

npm install @tiptap/extension-history

Settings 配置

depth 保留多少次历史记录，默认保留100次事件记录

History.configure({
  depth: 10,
})

newGroupDelay 更改之间的延迟(以毫秒为单位)，当更改不相邻时，总是启动一个新组。

History.configure({
  newGroupDelay: 1000,
})

Commands 命令

undo 撤销上一次更改。

editor.commands.undo()

redo 重做最后的更改

editor.commands.redo()

快捷键

Command	Windows/Linux	macOS
undo()	Control Z	Cmd Z
redo()	Shift Control Z Control Y	Shift Cmd Z Cmd Y

源代码

history 源代码

在线例子

vue 在线例子

History 例子

Vue 例子
React 例子

<template>
  <div v-if="editor">
    <button
      @click="editor.chain().focus().undo().run()"
      :disabled="!editor.can().undo()"
    >
      undo
    </button>
    <button
      @click="editor.chain().focus().redo().run()"
      :disabled="!editor.can().redo()"
    >
      redo
    </button>
    <editor-content :editor="editor" />
  </div>
</template>

<script>
import Document from '@tiptap/extension-document'
import History from '@tiptap/extension-history'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { Editor, EditorContent } from '@tiptap/vue-3'

export default {
  components: {
    EditorContent,
  },
  data() {
    return {
      editor: null,
    }
  },
  mounted() {
    this.editor = new Editor({
      extensions: [
        Document,
        Paragraph,
        Text,
        History,
      ],
      content: `
        <p>
          输入一下字然后点击按钮试试看
        </p>
        <p>
           也可以试试快捷键(Control/Cmd Z) or redo changes (Control/Cmd Shift Z).
        </p>
      `,
    })
  },
  beforeUnmount() {
    this.editor.destroy()
  },
}
</script>

import Document from '@tiptap/extension-document'
import History from '@tiptap/extension-history'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { EditorContent, useEditor } from '@tiptap/react'
import React from 'react'

export default () => {
  const editor = useEditor({
    extensions: [Document, Paragraph, Text, History],
    content: `
        <p>
          输入一下字然后点击按钮试试看
        </p>
        <p>
           也可以试试快捷键(Control/Cmd Z) or redo changes (Control/Cmd Shift Z). 
        </p>
      `,
  })

  if (!editor) {
    return null
  }

  return (
    <div>
      <button onClick={() => editor.chain().focus().undo().run()} disabled={!editor.can().undo()}>
        undo
      </button>
      <button onClick={() => editor.chain().focus().redo().run()} disabled={!editor.can().redo()}>
        redo
      </button>
      <EditorContent editor={editor} />
    </div>
  )
}

下载教程 Demo

本教程Demo的源码点击这里下载，Tiptap Demo，下载完成后运行npm i初始化依赖包。