Tiptap Editor 技术文档

1. 安装指南

1.1 环境要求

• Node.js 12.x 或更高版本
• npm 或 yarn

1.2 安装步骤

1. 安装核心包：

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

   或者使用 yarn：

   yarn add @tiptap/core @tiptap/starter-kit
   

2. 安装UI模板（可选）： 如果你需要一个UI模板作为起点，可以参考UI模板。

3. 安装协作后端（可选）： 如果你需要协作编辑功能，可以安装 Hocuspocus：

   npm install @hocuspocus/server
   

2. 项目使用说明

2.1 初始化编辑器

在你的项目中，首先需要初始化Tiptap编辑器。以下是一个简单的示例：

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

const editor = new Editor({
  element: document.querySelector('.element'),
  extensions: [
    StarterKit,
  ],
  content: '<p>Hello World!</p>',
})

2.2 自定义扩展

Tiptap支持通过扩展来定制编辑器的功能。你可以从文档中选择现有的扩展，或者创建自己的扩展。

import { Node } from '@tiptap/core'

const CustomNode = Node.create({
  name: 'customNode',
  // 自定义节点逻辑
})

const editor = new Editor({
  element: document.querySelector('.element'),
  extensions: [
    StarterKit,
    CustomNode,
  ],
  content: '<p>Hello World!</p>',
})

2.3 协作编辑

如果你需要协作编辑功能，可以集成Hocuspocus后端。以下是一个简单的示例：

import { HocuspocusProvider } from '@hocuspocus/provider'

const provider = new HocuspocusProvider({
  url: 'ws://localhost:1234',
  name: 'example-document',
})

const editor = new Editor({
  element: document.querySelector('.element'),
  extensions: [
    StarterKit,
    Collaboration.configure({
      document: provider.document,
    }),
  ],
  content: '<p>Hello World!</p>',
})

3. 项目API使用文档

3.1 核心API

• Editor：Tiptap编辑器的主类，用于初始化和配置编辑器。
• Node：用于创建自定义节点的类。
• Extension：用于创建自定义扩展的类。

3.2 常用方法

• setContent(content: string)：设置编辑器的内容。
• getHTML(): string：获取编辑器的HTML内容。
• on(event: string, callback: Function)：监听编辑器的事件。

3.3 扩展API

Tiptap提供了丰富的扩展API，你可以通过文档查看所有可用的扩展及其API。

4. 项目安装方式

4.1 通过npm安装

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

4.2 通过yarn安装

yarn add @tiptap/core @tiptap/starter-kit

4.3 手动下载

你可以从GitHub仓库手动下载源码，并将其集成到你的项目中。

---

通过以上文档，你应该能够顺利安装和使用Tiptap Editor，并根据需要进行自定义和扩展。如果你有任何问题或建议，欢迎在GitHub讨论区中提出。