直接结论：一个好编辑器不只是工具栏好看，更重要的是内容不会丢、AI 回填能同步、Markdown 和 HTML 切换安全、图片上传可靠。下面这份提示词可直接交给 AI 或开发团队，用于开发适合 CMS、AI 写作和知识库的 Tiptap 富文本编辑器。
编辑内容→AI 生成或回填→同步编辑器状态→保存到后端→可恢复与可验证
为什么要使用 Tiptap
Tiptap 基于 ProseMirror，适合需要结构化内容、可扩展节点和稳定状态管理的项目。把它看成一套“编辑器发动机”：界面、AI、保存、图片和格式转换都可以围绕它扩展，而不是把 HTML 字符串散落在页面各处。
可直接复制的开发提示词
请为当前项目开发一个现代化富文本编辑器，使用 Tiptap，不使用 TinyMCE、百度 UEditor 或浏览器默认编辑能力。
目标：
打造适合 CMS、AI 写作和知识库的编辑器。默认浅色界面，桌面端与移动端均可使用；编辑器必须能真实保存、恢复和同步内容，而不是只完成视觉界面。
一、顶部导航
使用紧凑 Tab：写作、AI 助手、Markdown、HTML、图片、设置。
当前 Tab 使用蓝色状态；不要把所有按钮堆在一行；禁止 alert、confirm、prompt。
二、基础能力
支持 H1/H2/H3、段落、粗体、斜体、删除线、有序和无序列表、引用、分割线、链接、图片、表格、代码块、行内代码、撤销、重做、全屏、字数统计和自动保存状态。
H2 与 H3 必须有清晰层级：H2 更大且有蓝色标记，H3 使用深灰或蓝灰色。
三、Markdown 和 HTML
支持 Markdown 导入、导出和预览；支持 HTML 源码模式和可视化模式互切。
转换前显示预览；转换或解析失败时显示 Toast 并保留原内容；不能因为模式切换清空正文。
过滤危险脚本，但保留图片、链接、表格、代码和允许的 class。
四、AI 助手
提供四个 Tab：生成、改写、标题、历史。
支持生成正文、优化选中内容、改写全文、生成标题、生成摘要和 SEO 描述。
回填前显示预览；可选择替换选区、替换全文或追加内容；保存 AI 历史。
AI 回填必须更新 Tiptap 内部状态，不能只改 textarea 或 DOM。
五、图片
支持本地上传、拖拽、粘贴、上传进度、失败提示、删除、替换、Alt 文本、标题和说明。上传通过后端接口完成，可扩展到 OSS；密钥绝不能放在前端。
六、保存与恢复
提交前读取 editor.getHTML()，同步到隐藏 textarea 或后端字段，再提交表单。
覆盖普通保存、自动保存、刷新、AI 回填、图片上传、Markdown 切换、HTML 切换和网络失败恢复。
保存成功或失败均显示 Toast；所有接口包含权限、nonce、超时和错误处理。
七、视觉与工程要求
使用浅灰白背景、白色内容区、蓝色主色、橙色警告、红色错误、绿色成功、轻边框和 10 到 14px 圆角。
桌面端自适应宽度，移动端不可横向溢出。组件拆分清晰，状态不依赖直接 DOM 操作。
实现真实 API、完整安装说明和基础测试，覆盖保存、回填、格式切换、图片上传与刷新恢复。不要留下 TODO、空函数或伪代码。最容易遗漏的三件事
| 问题 | 正确做法 | 后果 |
|---|---|---|
| AI 回填 | 更新 Tiptap 状态，再同步隐藏字段 | 只改 textarea 会导致更新后正文消失 |
| 格式切换 | 先保存当前状态，再解析和预览 | Markdown 或 HTML 错误会覆盖正文 |
| 图片上传 | 后端签名、权限和进度状态 | 前端泄露密钥或上传失败无反馈 |
WordPress 项目追加要求
如果项目是 WordPress，内容最终需要保存到 post_content。提交前同步到 #content，使用 nonce、权限检查和 REST API；不要与 TinyMCE、百度 UEditor 同时初始化。旧编辑器存在时要避免重复接管字段，AI 回填必须同时更新 Tiptap 和 WordPress 提交字段。
注意：编辑器的最大风险不是工具按钮少，而是“页面显示有内容，保存后内容没了”。任何实现都应优先验证同步、恢复和失败场景。
常见问题
为什么不能只用 textarea？ textarea 适合纯文本，但复杂表格、图片、选区改写和编辑器状态需要更可靠的结构化管理。
为什么 AI 回填需要预览？ AI 输出可能覆盖原文或改变格式，预览能让用户决定替换范围。
为什么所有提示都要用 Toast？ Toast 不会阻断编辑操作，也能让成功、失败和保存状态保持一致。
