导航

是什么

Tiptap 是一个基于 ProseMirror 的富文本编辑器框架，设计目标是灵活性和可扩展性。Tiptap 让开发者可以轻松构建功能强大的富文本编辑器，同时支持自定义节点（Node）、标记（Mark）和插件（Plugin）的扩展。

优势

高度可定制化
1. 支持通过扩展自定义节点、标记、工具栏和行为，满足复杂场景需求。
支持多种前端框架
1. 提供了对 Vue 2、Vue 3 和 React 的支持，能无缝集成到现代前端应用中。
现代设计
1. Tiptap 提供了高度抽象的接口，使开发者不需要直接操作 ProseMirror 的底层对象。
开箱即用
1. 提供了常用的文本格式化功能，如加粗、斜体、标题、列表、图片、表格等。
扩展生态
1. 内置丰富的扩展，如表格、拖放、任务列表，支持第三方扩展和自定义。

安装与基本配置

1. 安装 Tiptap

使用 npm 或 yarn 安装 Tiptap 和核心依赖：

# Vue 3 环境下
npm install @tiptap/core @tiptap/vue-3 @tiptap/starter-kit

2. 初始化一个简单的编辑器

文件结构

src/
├── components/
│   └── Editor.vue
└── main.js

Editor.vue

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

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

export default {
  name: 'Editor',
  components: {
    EditorContent,
  },
  setup() {
    const editor = useEditor({
      extensions: [StarterKit],
      content: `
        <h2>Welcome to Tiptap</h2>
        <p>This is a basic example.</p>
      `,
    });

    onMounted(() => {
      console.log('Editor mounted.');
    });

    onBeforeUnmount(() => {
      if (editor) editor.destroy();
    });

    return { editor };
  },
};
</script>

<style>
/* 添加你自己的样式 */
</style>

main.js

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

3. 常见功能扩展

Tiptap 提供了扩展功能，以下是一些常见扩展的示例。

3.1 支持图片插入

安装图片扩展：

npm install @tiptap/extension-image

在编辑器中添加 Image 扩展：

import Image from '@tiptap/extension-image';

const editor = useEditor({
  extensions: [StarterKit, Image],
  content: `
    <p>Click the button to add an image:</p>
  `,
});

// 插入图片
editor.chain().focus().setImage({ src: '<https://via.placeholder.com/150>' }).run();

3.2 支持表格

安装表格扩展：

npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-cell @tiptap/extension-table-header

在编辑器中添加表格扩展：

import Table from '@tiptap/extension-table';
import TableRow from '@tiptap/extension-table-row';
import TableCell from '@tiptap/extension-table-cell';
import TableHeader from '@tiptap/extension-table-header';

const editor = useEditor({
  extensions: [StarterKit, Table, TableRow, TableCell, TableHeader],
});

// 插入 3x3 表格
editor.chain().focus().insertTable({ rows: 3, cols: 3 }).run();

4. 自定义节点 (Custom Node)

Tiptap 提供强大的扩展机制，你可以通过定义自定义 Node 来实现自定义行为。

创建一个简单的 Custom Node

import { Node } from '@tiptap/core';

export const CustomNode = Node.create({
  name: 'customNode',
  group: 'block',
  content: 'text*',
  parseHTML() {
    return [{ tag: 'div[data-type="custom"]' }];
  },
  renderHTML({ HTMLAttributes }) {
    return ['div', { 'data-type': 'custom', ...HTMLAttributes }, 0];
  },
  addCommands() {
    return {
      setCustomNode: () => ({ commands }) => {
        return commands.insertContent('<div data-type="custom">Custom Node</div>');
      },
    };
  },
});

在编辑器中注册自定义节点：

import { CustomNode } from './CustomNode';

const editor = useEditor({
  extensions: [StarterKit, CustomNode],
});

// 插入自定义节点
editor.chain().focus().setCustomNode().run();