tiptap

阿超

发布于 2025-02-04 10:22:44

920

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

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

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

Tiptap 是什么？

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

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

Tiptap 的特点

模块化和可扩展性 Tiptap 的插件系统使得开发者可以按需引入功能。你可以使用官方插件，如 Bold、Italic、Table、Image，也可以编写自定义插件来扩展编辑器功能。
支持 Vue、React 和原生 JS Tiptap 提供了 Vue 和 React 的官方集成库，并支持直接在原生 JavaScript 项目中使用，适合各种前端技术栈。
高度可定制化 开发者可以完全自定义编辑器的外观和行为，包括菜单栏、工具栏、快捷键、格式规则等。
支持协作编辑 结合 Y.js 或 Hocuspocus，Tiptap 可以轻松实现实时协作编辑，类似 Google Docs 的多人同步编辑功能。
Markdown 支持 Tiptap 支持将内容转换为 Markdown 格式，适合文档管理系统和博客平台。
现代浏览器兼容性 支持主流现代浏览器，且提供良好的移动端体验。

安装与快速使用

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 作为服务器端协作服务。