tiptap

暮冬时烤雪，迟夏写长信。——陈鸿宇

https://github.com/ueberdosis/tiptap/
https://tiptap.dev/

最近在做富文本编辑器的项目时，发现了 Tiptap，这是一个基于 ProseMirror 的现代化富文本编辑器框架。Tiptap 拥有高度的可扩展性、灵活的 API 和出色的跨平台支持，非常适合构建复杂的文本编辑体验。它在社区中有着很高的评价，并且已经在许多企业级项目中得到应用。

---

Tiptap 是什么？

Tiptap 是一个为现代 Web 应用设计的富文本编辑器框架，采用模块化设计，允许开发者自由组合功能和插件。不同于传统的 WYSIWYG（所见即所得）编辑器，Tiptap 提供了更细粒度的内容控制能力，让开发者能够精确定义编辑器的行为和外观。

Tiptap 的核心依赖 ProseMirror，这是一个非常强大的文本编辑引擎。Tiptap 通过封装 ProseMirror 的复杂性，提供了更易用的开发接口，使得构建富文本编辑器变得更加简单高效。

---

Tiptap 的特点

1. 模块化和可扩展性
   Tiptap 的插件系统使得开发者可以按需引入功能。你可以使用官方插件，如 Bold、Italic、Table、Image，也可以编写自定义插件来扩展编辑器功能。

2. 支持 Vue、React 和原生 JS
   Tiptap 提供了 Vue 和 React 的官方集成库，并支持直接在原生 JavaScript 项目中使用，适合各种前端技术栈。

3. 高度可定制化
   开发者可以完全自定义编辑器的外观和行为，包括菜单栏、工具栏、快捷键、格式规则等。

4. 支持协作编辑
   结合 Y.js 或 Hocuspocus，Tiptap 可以轻松实现实时协作编辑，类似 Google Docs 的多人同步编辑功能。

5. Markdown 支持
   Tiptap 支持将内容转换为 Markdown 格式，适合文档管理系统和博客平台。

6. 现代浏览器兼容性
   支持主流现代浏览器，且提供良好的移动端体验。

---

安装与快速使用

1. 安装 Tiptap

在 Vue 项目中，可以通过 npm 或 yarn 安装：

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

或者：

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

2. 创建一个简单的编辑器

以下是在 Vue 3 中使用 Tiptap 的示例：

<template>
  <div>
    <editor-content :editor="editor" />
  </div>
</template>

<script>
import { EditorContent, useEditor } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'

export default {
  components: {
    EditorContent,
  },
  setup() {
    const editor = useEditor({
      extensions: [StarterKit],
      content: '<p>Hello, Tiptap!</p>',
    })

    return {
      editor,
    }
  },
  beforeUnmount() {
    editor?.destroy()
  },
}
</script>

<style>
/* 自定义编辑器样式 */
.editor-content {
  border: 1px solid #ddd;
  padding: 16px;
  min-height: 200px;
  font-size: 16px;
  font-family: Arial, sans-serif;
}
</style>

---

核心插件

Tiptap 提供了一系列核心插件，涵盖了常用的文本格式化功能。以下是一些常用插件：

• StarterKit：包含基本的编辑功能（加粗、斜体、列表等）。

  import StarterKit from '@tiptap/starter-kit'

• Bold（加粗）：

  import Bold from '@tiptap/extension-bold'

• Italic（斜体）：

  import Italic from '@tiptap/extension-italic'

• Table（表格）：

  import Table from '@tiptap/extension-table'

• Image（图片）：

  import Image from '@tiptap/extension-image'

你可以根据项目需求自由选择和组合插件。

---

扩展功能

除了内置插件，Tiptap 还允许开发者编写自定义扩展。例如，下面是一个自定义 “高亮” 插件的示例：

import { Extension } from '@tiptap/core'

const Highlight = Extension.create({
  name: 'highlight',

  addCommands() {
    return {
      toggleHighlight: () => ({ commands }) => {
        return commands.toggleMark('highlight')
      },
    }
  },

  addKeyboardShortcuts() {
    return {
      'Mod-h': () => this.editor.commands.toggleHighlight(),
    }
  },
})

export default Highlight

通过扩展插件，开发者可以轻松为编辑器添加特定功能，满足复杂的业务需求。

---

协作编辑

Tiptap 通过集成 Y.js 和 Hocuspocus 提供了协作编辑能力。你可以在多人同时编辑文档时实时同步内容，类似 Google Docs 的多人协作体验。

示例代码：

import { Collaboration } from '@tiptap/extension-collaboration'
import { yDoc, provider } from './collaboration-setup'

const editor = useEditor({
  extensions: [
    StarterKit,
    Collaboration.configure({
      document: yDoc,
    }),
  ],
})

在实际项目中，可以将 Hocuspocus 作为服务器端协作服务。

---

应用场景

1. 博客平台
   作为富文本编辑器，Tiptap 支持 Markdown 输出和多媒体内容管理，非常适合集成到博客和文档平台中。

2. 企业协作工具
   结合协作编辑功能，Tiptap 可以构建类似 Google Docs 的多人实时编辑工具。

3. 内容管理系统（CMS）
   Tiptap 提供了丰富的插件和自定义能力，适合 CMS 系统中的富文本内容编辑场景。

4. 教育与知识库
   在教育平台和知识库应用中，Tiptap 可以用于编写和管理课程内容、知识文章等。

---

社区与支持

Tiptap 拥有活跃的开源社区，开发者可以通过 GitHub 提交 Issue 或 Pull Request，与社区成员交流。

• 官方文档：Tiptap Documentation
• GitHub 项目：Tiptap GitHub

此外，Tiptap 团队还提供了商业支持服务，帮助企业客户优化和定制编辑器解决方案。

---

总结

Tiptap 是一款功能强大、可扩展性极高的富文本编辑器框架，非常适合现代 Web 应用的开发需求。无论是简单的文本格式化，还是复杂的协作编辑场景，Tiptap 都能提供稳定、高效的解决方案。如果你正在寻找一款现代化的编辑器框架，不妨试试 Tiptap！