Tiptap
Tiptap (ueberdosis GmbH) · 程式設計 · 生產力
Tiptap 是一套以 ProseMirror 為基礎的無頭開源編輯器框架。它內建超過 100 種擴充套件與付費協作工具，讓團隊打造自訂的編輯器體驗。
關於 Tiptap
What Is Tiptap
Tiptap 是一套無頭的富文字編輯器框架，給想要完全掌控編輯器外觀與行為的開發者使用。它把 ProseMirror 這套成熟的網頁編輯器引擎包進現代化的 API，在 React、Vue、Svelte、Angular 或純 JavaScript 下都能照常運作。開源核心採用 MIT 授權、免費使用，付費平台則加上協作、留言、版本紀錄與 AI 功能。
團隊選它不是因為開箱好看。它根本沒有附工具列，也沒有現成的版面，這正是重點。每個選單、每個浮動泡泡、每個快速鍵都由你決定，而且只載入產品真正需要的擴充套件。要做類 Notion 筆記、郵件編輯器或內容管理工具的人，拿到的是一套基礎，而不是一個固定的元件。
最大的門檻在學習曲線與費用拆分。編輯器免費，但凡是牽涉 Tiptap Cloud 的功能（即時協作、雲端文件、留言）都要訂閱，而且以文件和開發者授權分別計算。偏好自行維運的團隊，也可以用開源的 Hocuspocus 後端自行架設。
Getting Started
- 在你選用的框架專案裡，從 npm 安裝核心套件，例如
@tiptap/core與@tiptap/starter-kit。 - 建立編輯器實例，傳入你要的擴充套件，先從 StarterKit 的基本排版開始。
- 把編輯器掛進你的介面，自己加上工具列、選單和樣式，因為框架本身不附這些東西。
- 需要即時編輯就接上協作擴充套件，以及 Hocuspocus 或 Tiptap 的供應服務。
- 在 Tiptap Cloud 儀表板啟動免費試用，訂閱前先試試留言、版本紀錄這類付費功能。
產品資訊
快速了解 Tiptap 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 前端開發者：Tiptap 提供一套無頭編輯器框架，能依任何設計自由塑形，你得對選用的框架夠熟才有辦法接起來。
- 打造筆記或文件產品的團隊：類 Notion 範本與分頁版面能縮短做到可用編輯器的時間。精緻範本放在付費方案裡。
- 偏好自行架設的團隊：開源核心加上 Hocuspocus 後端，可以在自家伺服器跑協作，不必付雲端訂閱費。
- 內容平台開發者：匯入與匯出擴充套件涵蓋 DOCX、Markdown、PDF、ODT 與 EPUB，多數出版流程要的格式都在裡面。
任務
- 打造自訂富文字編輯器：只組裝你想要的標記、節點與行為，套件維持精簡，結構也更好預測。
- 加上即時協作：協作擴充套件透過 Yjs 的 CRDT 同步編輯，在場指示與游標追蹤都內建。
- 追蹤文件修改：Tracked Changes 把編輯變成建議，審閱者可以接受或拒絕，並保留每位使用者的署名。
- 讓 AI 代理擁有編輯能力：AI Toolkit 讓模型讀取選取範圍、改寫內容，把建議直接串進文件。
- 管理文件流程：留言、版本紀錄與快照比對，完整留下誰在何時改了什麼。
情境
- 需要內建編輯器、又要跟自家介面一致的 SaaS 產品：無頭設計讓你的設計系統原封不動。
- 會匯入 Word 檔的編輯團隊：DOCX 與 Markdown 匯入把既有內容帶進來，不必手動重排格式。
- 有資料落地規範的受監管單位：美國或歐盟主機，加上 Enterprise 的地端選項，能把文件留在你要的區域。
主要功能
無頭架構
編輯器完全不帶介面。你拿到的是編輯邏輯，工具列、浮動選單與版面全部自己畫。這正是 Tiptap 能塞進設計規範嚴格產品的原因，現成元件在那裡只會處處打架。
跨框架整合
Tiptap 支援 React、Vue 3 與 Vue 2、Svelte、Angular、Next.js、Nuxt 及純 JavaScript。主要框架都有官方套件，其餘靠社群綁定補齊。核心裝的是同一套，換的只是你技術堆疊的渲染層。
模組化擴充套件
超過 100 種官方與社群擴充套件，涵蓋排版、表格、語法高亮的程式碼區塊、圖片、提及與自訂節點。只啟用你要的就好。StarterKit 把常用的一次打包，基本編輯器幾分鐘就能站起來。
即時協作
協作擴充套件用 Yjs 的 CRDT 同步使用者之間的編輯，跑在開源的 Hocuspocus 後端或 Tiptap Cloud 上。在場指示、游標追蹤與衝突處理都是內建，你不必自己拼同步層。
留言與版本紀錄
留言替文件加上討論串，版本紀錄讓使用者還原任何先前的狀態。Snapshot Compare 標出兩個版本之間的差異，這在法律、編輯與合規文件上格外要緊，因為軌跡必須經得起檢驗。
Tracked Changes
Tracked Changes 開啟建議模式與校閱。審閱者提出修改，新增與刪除都會被記錄，變更能逐筆或整批接受、拒絕。每則建議都帶署名，你清楚知道是誰提了什麼。
AI Toolkit
AI Toolkit 讓 AI 代理具備文件編輯能力。它能讀取選取範圍與整份文件、套用精準的修補、串流內容，並把 AI 建議列出來供審閱。結構感知讓代理守在編輯器定義的規則裡。
文件匯入與匯出
匯入與匯出涵蓋 DOCX、Markdown、PDF、ODT 與 EPUB。從 Word 搬過來的團隊、或正在搭部落格的人，進出內容都不必從頭寫轉換器。
REST API 與 Webhook
Team 以上方案加入 Webhook 整合與 REST API 存取，能在後端操作文件。你可以用 JSON 取回文件、以程式推送編輯，內容變動時也會收到通知。
優缺點
優點
- 開源核心採 MIT 授權、免費使用，不必訂閱就能推出自訂編輯器。
- 無頭設計讓編輯器配合你的產品介面，而不是反過來要你遷就它。
- 超過 100 種擴充套件與官方框架套件，縮短常見功能的開發時間。
- 透過 Hocuspocus 自行架設，重視隱私的團隊能把文件留在自家伺服器。
- 匯入與匯出把 DOCX、Markdown、PDF、ODT 與 EPUB 集中在同一處。
缺點
- 編輯器不附介面，每條工具列、每個選單都得自己建，前期會多出不少工。
- 協作、留言與版本紀錄需要付費方案，費用跟著文件數與開發者數一起漲。
- 雲端文件會算進方案額度，超量時會默默觸發自動升級。
- 最精緻的範本，以及 AI Toolkit、Tracked Changes 外掛的價格不公開，得另談。
常見問題
Tiptap 是一套無頭的富文字編輯器框架，用來在網頁上打造自訂編輯器。開發者拿它做類 Notion 筆記應用、留言系統、郵件編輯器與內容平台，這些地方的介面都得跟自家產品一致。
相關內容
探索與 Tiptap 相關的工具、技能與文章。
Tiptap 替代方案
Base Code
Base44 (Wix) · 程式設計 · 生產力Base Code 是 Base44 推出的共享雲端開發環境。團隊在對話中描述對既有 GitHub 儲存庫的修改，看著預覽確認結果，再以 Pull Request 交回工程團隊。
Google EmbeddingGemma 2
Google DeepMind · 寫作 · 圖片 · 程式設計Google EmbeddingGemma 2 是 7.4 億參數的開源模型，能把文字、程式碼、圖片、音訊與影片畫面轉成同一個 768 維空間裡的向量，在手機與筆電上就能執行。
GitGlow
GitGlow · 程式設計 · 生產力GitGlow 是桌面版 Git 用戶端，把你自己的程式碼與 AI 代理程式的變更集中在同一份審查裡，讓你在交付前看清楚機器上究竟要送出什麼。