·tiptap
</>

tiptap

使用 Tiptap 建立富文本編輯器,Tiptap 是一個基於無頭 ProseMirror 的編輯器框架,用於支援 Tailwind v4 的 React。涵蓋 SSR 安全設定、圖片上傳、散文樣式、協作編輯和 Markdown 支援。在新增富文本編輯器、配置 Tiptap 擴充功能、在編輯器中處理圖像上傳或使用 Y.js 設定協作編輯時使用。用於tiptap、富文本、編輯器、prosemirror、react、tailwind。

25安裝·2熱度·@oakoss

安裝

$npx skills add https://github.com/oakoss/agent-skills --skill tiptap

如何安裝 tiptap

透過命令列快速安裝 tiptap AI 技能到你的開發環境

  1. 開啟終端機: 開啟你的終端機或命令列工具(如 Terminal、iTerm、Windows Terminal 等)
  2. 執行安裝指令: 複製並執行以下指令:npx skills add https://github.com/oakoss/agent-skills --skill tiptap
  3. 驗證安裝: 安裝完成後,技能將自動設定到你的 AI 程式設計環境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

來源:oakoss/agent-skills。

SKILL.md

查看原文

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
分類
</>開發工具
認證
收錄時間
2026-02-25
更新時間
2026-03-11

Browse more skills from oakoss/agent-skills

快速解答

什麼是 tiptap?

使用 Tiptap 建立富文本編輯器,Tiptap 是一個基於無頭 ProseMirror 的編輯器框架,用於支援 Tailwind v4 的 React。涵蓋 SSR 安全設定、圖片上傳、散文樣式、協作編輯和 Markdown 支援。在新增富文本編輯器、配置 Tiptap 擴充功能、在編輯器中處理圖像上傳或使用 Y.js 設定協作編輯時使用。用於tiptap、富文本、編輯器、prosemirror、react、tailwind。 來源:oakoss/agent-skills。

如何安裝 tiptap?

開啟你的終端機或命令列工具(如 Terminal、iTerm、Windows Terminal 等) 複製並執行以下指令:npx skills add https://github.com/oakoss/agent-skills --skill tiptap 安裝完成後,技能將自動設定到你的 AI 程式設計環境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

這個 Skill 的原始碼在哪?

https://github.com/oakoss/agent-skills

詳情

分類
</>開發工具
來源
skills.sh
收錄時間
2026-02-25