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

时间：2024-12-14 08:26:21

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>
      <span
        style={buttonStyle}
        onClick={() => editor.chain().focus().toggleBold().run()}
      >
        加粗
      </span>
      <span
        style={buttonStyle}
        onClick={() => editor.chain().focus().toggleItalic().run()}
      >
        斜体
      </span>
      <span
        style={buttonStyle}
        onClick={() => editor.chain().focus().toggleStrike().run()}
      >
        删除线
      </span>
      <span
        style={buttonStyle}
        onClick={() => editor.chain().focus().toggleUnderline().run()}
      >
        下划线
      </span>
      <span
        style={buttonStyle}
        onClick={() => editor.chain().focus().setFontSize(24).run()}
      >
        字体大小
      </span>
      <span
        style={buttonStyle}
        onClick={() => editor.chain().focus().setTextColor("red").run()}
      >
        文本颜色
      </span>
      <span
        style={buttonStyle}
        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
      >
        标题
      </span>
      <span
        style={buttonStyle}
        onClick={() => editor.chain().focus().toggleBulletList().run()}
      >
        无序列表
      </span>
      <span
        style={buttonStyle}
        onClick={() => editor.chain().focus().toggleOrderedList().run()}
      >
        有序列表
      </span>
      <span
        style={buttonStyle}
        onClick={() => editor.chain().focus().toggleBlockquote().run()}
      >
        引用块
      </span>
      <span
        style={buttonStyle}
        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
      >
        代码块
      </span>
      <span
        style={buttonStyle}
        onClick={() =>
          editor
            .chain()
            .focus()
            .toggleLink({ href: "https://example.com" })
            .run()
        }
      >
        超链接
      </span>
      <span
        style={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 定制更多复杂的功能，满足项目中的各种业务需求。

相关文章