Tiptap,: 富文本编辑器入门与案例分析

Tiptap 是一个现代的富文本编辑器，基于 ProseMirror 打造，旨在提供一个灵活且功能强大的文本编辑解决方案。它具有开箱即用的能力，同时也允许开发者根据业务需求进行高度定制化扩展。与传统的富文本编辑器相比，Tiptap 提供了更精细的控制、更加简洁的 API 以及丰富的扩展机制，帮助开发者构建与业务需求紧密结合的编辑器。

一、Tiptap 介绍

1. 什么是 Tiptap？

Tiptap 是一个开源的富文本编辑器，它基于 ProseMirror 构建，ProseMirror 本身是一个非常强大的文本编辑框架，提供了低级的操作 API，用于处理文档结构、格式化文本和管理编辑器状态。而 Tiptap 在此基础上提供了更高层的 API，使得开发者能够更加简便地进行开发，尤其适用于需要定制化或扩展功能的应用场景。

Tiptap 的最大亮点在于它的 可扩展性 和 灵活性，开发者不仅可以选择使用内置的基本功能，还可以通过插件来定制和扩展编辑器，满足不同需求的同时，也能降低开发成本。

2. Tiptap 的优势

• 极高的定制化能力：Tiptap 提供了简单易用的 API 和丰富的插件机制，开发者可以很方便地根据需求扩展编辑器功能，甚至自定义编辑器行为和界面。
• 兼容性强：Tiptap 支持多种 Web 框架，尤其是 React 和 Vue 等流行的前端框架。无论你使用哪个框架，都可以轻松集成 Tiptap。
• 开箱即用的功能：Tiptap 提供了强大的内置功能，如文本加粗、斜体、标题、列表、代码块、链接等常见的富文本编辑功能。
• 插件生态丰富：Tiptap 拥有丰富的插件库，你可以通过插件扩展编辑器功能，包括 Markdown 支持、表格支持、图片上传、代码高亮等。
• 强大的社区支持：作为一个开源项目，Tiptap 有着活跃的开发和使用社区，可以轻松获取资源、解决方案和建议。

3. 与传统富文本编辑器的区别

与传统的富文本编辑器（如 CKEditor、Quill 或 TinyMCE）相比，Tiptap 提供了更高的灵活性。传统的富文本编辑器往往是封闭的系统，功能和定制性较为有限。而 Tiptap 基于 ProseMirror 提供了低层次的控制，使得开发者可以根据需求深入定制。例如，你可以自定义工具栏、插入自定义节点，甚至自定义编辑器的行为逻辑，这在传统编辑器中是很难做到的。

二、Tiptap 安装与配置

1. 安装 Tiptap

Tiptap 提供了易于安装的 NPM 包，支持多种开发环境。首先，您需要安装以下依赖：

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

如果你还需要支持 Vue 或 React，可以安装对应的支持包：

npm install @tiptap/react # 或者 npm install @tiptap/vue-3

2. 创建基础编辑器

在安装了依赖之后，我们可以使用 Tiptap 创建一个最基础的富文本编辑器。以下是 React 示例：

import React, { useState } from "react";
import { EditorContent, useEditor } from "@tiptap/react";
import { StarterKit } from "@tiptap/starter-kit";const Editor = () => {const editor = useEditor({extensions: [StarterKit], // 使用 StarterKit 插件集content: "<p>欢迎使用 Tiptap 编辑器！</p>",});return (<div><h2>基本编辑器</h2><EditorContent editor={editor} /></div>);
};export default Editor;

通过上面的代码，我们就已经创建了一个基础的富文本编辑器。

查看 dom，我们可以知道

通过 tiptap 的 class 来修改编辑器的样式

  width: 100vw;height: 600px;
}

这样，我们就可以放大我们的编辑器区域了。

到此为止，编辑器就引入成功了。接下来，我们可以装一些扩展功能。

3. 配置和扩展功能

Tiptap 支持插件化机制，通过扩展功能，你可以轻松加入需要的功能。例如，添加对 超链接 的支持：

npm install @tiptap/extension-link

import { Link } from '@tiptap/extension-link';const editor = useEditor({extensions: [StarterKit,Link, // 启用 Link 扩展],
});

通过这种方式，你可以快速将新的功能集成到编辑器中。

我们将我们的 content 内容改成如下

    content: '<p>在此插入超链接 <a href="https://example.com">点击这里</a></p>',

三、Tiptap 的核心功能和扩展

Tiptap 提供了很多核心功能和扩展包，可以帮助开发者创建复杂的富文本编辑器。以下是一些常见的功能和扩展：

1. 富文本编辑功能

• 基本文本格式化：支持文本加粗、斜体、下划线、删除线、文本颜色、字体大小等基本文本格式。
• 列表和表格：内置支持无序列表、有序列表、嵌套列表、表格的创建与编辑。
• 标题和段落格式：支持不同级别的标题（h1, h2, h3 等）、段落、引用块等格式化。
• 代码块：支持插入代码块，自动进行语法高亮。
• 链接：支持超链接功能，可以插入并编辑链接。

2. 插件扩展

• Markdown 支持：Tiptap 提供了一个 Markdown 扩展，允许编辑器支持 Markdown 格式。开发者可以通过此插件快速创建一个 Markdown 编辑器。

npm install @tiptap/extension-markdown

• 表情符号支持：通过插件，Tiptap 支持表情符号的插入。

npm install @tiptap/extension-emoji

• 图片上传：Tiptap 支持通过上传图片扩展来集成图片上传功能，支持将本地文件上传到服务器并显示。

npm install @tiptap/extension-image

• 媒体嵌入：Tiptap 提供了丰富的嵌入功能，支持视频、音频等多媒体内容的插入。

所有支持的插件可以在 https://tiptap.dev/docs/editor/extensions/overview 这里查看

四、Tiptap 的应用案例

通过上面，我们可以安装各种插件来扩展我们的编辑器。只要我们在增加一系列的按钮和上面的插件进行融合，那么我们就可以实现一个功能强大的编辑器了。

import { EditorContent, useEditor } from "@tiptap/react";
import { StarterKit } from "@tiptap/starter-kit";
import { Link } from "@tiptap/extension-link";
import { Image } from "@tiptap/extension-image";
import { Blockquote } from "@tiptap/extension-blockquote";
import { CodeBlock } from "@tiptap/extension-code-block";
import { Heading } from "@tiptap/extension-heading";
import { ListItem } from "@tiptap/extension-list-item";
import { OrderedList } from "@tiptap/extension-ordered-list";
import { BulletList } from "@tiptap/extension-bullet-list";
import { Bold } from "@tiptap/extension-bold";
import { Italic } from "@tiptap/extension-italic";
import { Strike } from "@tiptap/extension-strike";
import { Underline } from "@tiptap/extension-underline";const Editor = () => {const editor = useEditor({extensions: [StarterKit,Link,Image,Blockquote,CodeBlock,Heading,ListItem,OrderedList,BulletList,Bold,Italic,Strike,Underline,],content: `<h2>功能强大的富文本编辑器</h2><p>欢迎使用 Tiptap 编辑器！这里展示了各种格式化功能：</p><p>文本样式：<strong>粗体文本</strong>、<em>斜体文本</em>、<s>删除线文本</s>、<u>下划线文本</u></p><h2>标题示例</h2><p><a href="https://tiptap.dev">这是一个超链接示例</a></p><blockquote>这是一个引用块的示例文本。引用块通常用于强调重要内容或引用他人的话语。</blockquote><ul><li>无序列表项 1</li><li>无序列表项 2</li><li>无序列表项 3</li></ul><ol><li>有序列表项 1</li><li>有序列表项 2</li><li>有序列表项 3</li></ol><pre><code>// 这是一个代码块示例
function hello() {console.log("Hello, Tiptap!");
}</code></pre><p><img src="https://picsum.photos/200/100" alt="示例图片" /></p>`,});const buttonStyle = {cursor: "pointer",margin: "0 8px",color: "#4a5568",userSelect: "none" as const,};return (<div><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleBold().run()}>加粗</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleItalic().run()}>斜体</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleStrike().run()}>删除线</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleUnderline().run()}>下划线</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().setFontSize(24).run()}>字体大小</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().setTextColor("red").run()}>文本颜色</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}>标题</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleBulletList().run()}>无序列表</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleOrderedList().run()}>有序列表</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleBlockquote().run()}>引用块</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleCodeBlock().run()}>代码块</span><spanstyle={buttonStyle}onClick={() =>editor.chain().focus().toggleLink({ href: "https://example.com" }).run()}>超链接</span><spanstyle={buttonStyle}onClick={() =>editor.chain().focus().insertImage({ src: "https://example.com/image.jpg" }).run()}>插入图片</span><EditorContent editor={editor} /></div>);
};export default Editor;

五、总结

Tiptap 是一个功能强大且灵活的富文本编辑器，它不仅支持基础的文本格式化，还提供了多种插件扩展，可以满足各种需求。从创建简单的博客编辑器到复杂的内容管理系统，Tiptap 都能够轻松应对。如果你正在寻找一个能够快速集成、易于定制和扩展的富文本编辑器，Tiptap 是一个非常合适的选择。

通过本文的介绍，你应该已经掌握了 Tiptap 的基础使用方法，并能够开始使用它来构建自己的富文本编辑器。随着你对 Tiptap 的深入了解，你还可以通过插件和 API 定制更多复杂的功能，满足项目中的各种业务需求。