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;

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳