使用 Tiptap 建立富文本編輯器，Tiptap 是一個基於無頭 ProseMirror 的編輯器框架，用於支援 Tailwind v4 的 React。涵蓋 SSR 安全設定、圖片上傳、散文樣式、協作編輯和 Markdown 支援。在新增富文本編輯器、配置 Tiptap 擴充功能、在編輯器中處理圖像上傳或使用 Y.js 設定協作編輯時使用。用於tiptap、富文本、編輯器、prosemirror、react、tailwind。
透過命令列快速安裝 tiptap AI 技能到你的開發環境
來源：oakoss/agent-skills。
Tiptap is a headless rich text editor built on ProseMirror, providing a modular extension system for React applications. It supports React 19, Tailwind v4, and SSR frameworks like Next.js. Use when building blog editors, comment systems, documentation tools, or Notion-like collaborative apps. Do NOT use with Create React App (CRA is incompatible with Tiptap v3 ESM module structure; use Vite instead).
| Create editor | useEditor({ extensions: [StarterKit], immediatelyRender: false }) | | Render editor | | | Prose styling | Add className="prose dark:prose-invert max-w-none" to container | | Configure StarterKit | StarterKit.configure({ heading: { levels: [1, 2, 3] } }) |
| Disable undo/redo | StarterKit.configure({ undoRedo: false }) (required for Y.js collab) | | Image upload | Set allowBase64: false, use upload handler with URL replacement | | Markdown support | import { Markdown } from '@tiptap/markdown' (official, open-source) |
為搜尋與 AI 引用準備的穩定欄位與指令。
npx skills add https://github.com/oakoss/agent-skills --skill tiptap使用 Tiptap 建立富文本編輯器，Tiptap 是一個基於無頭 ProseMirror 的編輯器框架，用於支援 Tailwind v4 的 React。涵蓋 SSR 安全設定、圖片上傳、散文樣式、協作編輯和 Markdown 支援。在新增富文本編輯器、配置 Tiptap 擴充功能、在編輯器中處理圖像上傳或使用 Y.js 設定協作編輯時使用。用於tiptap、富文本、編輯器、prosemirror、react、tailwind。 來源：oakoss/agent-skills。
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/oakoss/agent-skills --skill tiptap 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/oakoss/agent-skills