用途:用于在 React 项目中构建邮件、评论或内容场景的富文本编辑器,实现工具栏控制的所见即所得编辑,并安全渲染用户生成的 HTML。
主要能力:提供 simple-editor.tsx(加粗、斜体、列表、链接、占位符的简化编辑器)、rich-text-editor.tsx(含 H1-H3 标题、代码块、引用、撤销/重做)与 html-content.tsx(DOMPurify 安全 HTML 渲染)。数据以 HTML 形式存储与传输,无需 Markdown 转换,实现即时渲染。
用法:使用 bun add @tiptap/react @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-placeholder @tiptap/pm dompurify 安装依赖,并安装 @types/dompurify。复制 assets/components/ 下的组件,在 globals.css 加入列表样式,如 [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6 与 prose-p:my-1 prose-ul:my-1 prose-ol:my-1 prose-li:my-0。SSR/Next.js 需设置 immediatelyRender: false,外部值同步用 useEffect 对比 editor.getHTML(),空内容判断 <p></p>。显示前必须用 DOMPurify.sanitize 并限制允许标签与属性。
适用场景:邮件编辑器、评论框、内容创作界面。
限制:依赖 Tiptap v3、React 与 Tailwind prose 类;列表标记显示依赖显式 CSS,缺失则列表不显示符号;性能、收费与平台等信息暂未提供。