【亲测免费】 Tiptap 开源项目教程

项目介绍

Tiptap 是一个无头（headless）、框架无关的富文本编辑器，基于高度可靠的 ProseMirror 库构建。它的无头特性意味着它不附带预设的用户界面，提供了完全的设计自由度。Tiptap 通过扩展（extensions）实现高度可定制和可扩展性，适用于需要自定义编辑器界面的各种应用场景。

项目快速启动

安装 Tiptap

首先，你需要通过 npm 安装 Tiptap 及其相关依赖：

npm install @tiptap/core @tiptap/pm @tiptap/starter-kit

配置编辑器

以下是一个简单的 Vue 3 项目中配置 Tiptap 编辑器的示例：

import { createApp } from 'vue'
import App from './App.vue'
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const app = createApp(App)

app.component('Editor', {
  template: `<div ref="editor"></div>`,
  data() {
    return {
      editor: null
    }
  },
  mounted() {
    this.editor = new Editor({
      element: this.$refs.editor,
      extensions: [
        StarterKit,
      ],
      content: '<p>Hello World!</p>',
    })
  },
  beforeUnmount() {
    this.editor.destroy()
  }
})

app.mount('#app')

应用案例和最佳实践

自定义工具栏

Tiptap 允许你完全自定义编辑器的工具栏。以下是一个自定义工具栏的示例：

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { Toolbar } from '@tiptap/extension-toolbar'

const editor = new Editor({
  extensions: [
    StarterKit,
    Toolbar.configure({
      toolbar: [
        ['bold', 'italic', 'underline'],
        ['heading', 'bulletList', 'orderedList'],
        ['link', 'image'],
      ],
    }),
  ],
})

实时协作

Tiptap 支持实时协作编辑，通过与 Hocuspocus 后端服务结合，可以实现多用户实时编辑同一文档的功能。

典型生态项目

Hocuspocus

Hocuspocus 是一个开源的后端服务，与 Tiptap 编辑器配合使用，提供实时协作功能。它支持文档的实时同步和交互，是构建协作编辑应用的理想选择。

Tiptap Extensions

Tiptap 提供了丰富的扩展库，包括协作、AI 内容转换、评论等功能。你可以根据需要选择和集成这些扩展，以增强编辑器的功能。

通过以上内容，你可以快速了解和开始使用 Tiptap 开源项目，并根据实际需求进行定制和扩展。