Quick answer: A polished editor is not just a toolbar. It must preserve content, keep AI insertions in sync, safely switch between Markdown and HTML, and reliably upload images. This English prompt is designed for CMS, AI writing, and knowledge-base projects.
Copy-ready prompt
Build a production-ready rich text editor with Tiptap for the current project. Do not use TinyMCE, Baidu UEditor, or browser-default editing as the primary editor.
Goal: create a clean, light, responsive editor for CMS, AI writing, and knowledge-base workflows. It must save real data, restore content, and synchronize editor state with the backend.
Top tabs: Write, AI Assistant, Markdown, HTML, Images, Settings. Use compact tabs with a blue active state. Do not use alert, confirm, or prompt.
Core editing: H1/H2/H3, paragraphs, bold, italic, strike-through, ordered and unordered lists, quotes, dividers, links, images, tables, code blocks, inline code, undo, redo, fullscreen, word count, and autosave state. H2 and H3 must have visually distinct styles.
Markdown and HTML: import, export, preview, and safe two-way conversion. Always preview before overwriting content. Parsing failures must show a Toast and preserve existing content. Sanitize dangerous scripts while keeping approved images, links, tables, code, and classes.
AI Assistant: tabs named Generate, Rewrite, Title, History. Support generating content, rewriting a selection or full document, titles, summaries, and SEO descriptions. Show a preview before insertion. AI insertion must update the Tiptap internal state, not only a textarea or direct DOM content.
Images: support local upload, drag-and-drop, paste, progress, error state, delete, replace, alt text, title, and caption. Upload through a backend API; support future object storage. Never expose storage keys in the frontend.
Saving: before form submission call editor.getHTML(), synchronize the result to the hidden textarea or backend field, then submit. Cover normal save, autosave, refresh recovery, AI insertion, image upload, Markdown/HTML switches, and network failure. Use Toast notifications for every success, warning, and error.
Engineering: use the current frontend framework and official Tiptap extensions. Keep editor state separate from backend state. Avoid direct DOM manipulation as the source of truth. Include permissions, CSRF/nonce protection, timeouts, error handling, setup documentation, and tests for saving, AI insertion, format switching, image upload, and refresh recovery. Do not leave TODOs, placeholders, or pseudo-code.Three non-negotiable rules
| Area | Rule | Reason |
|---|---|---|
| AI insertion | Update Tiptap state before syncing hidden fields | Prevents stale content from overwriting AI output |
| Format conversion | Save, parse, preview, then confirm | Prevents a failed conversion from clearing the document |
| Image upload | Use backend authorization and visible progress | Protects credentials and gives users recoverable feedback |
WordPress addendum
For WordPress, save content to post_content, synchronize Tiptap HTML to #content before submission, use nonces and capability checks, and never initialize old editors alongside Tiptap. AI insertion must update both Tiptap state and the WordPress submission field.
Important: the most damaging editor bug is visible content disappearing after save. Test synchronization and recovery before adding decorative features.
转载请注明：三五二萌文网 » Tiptap Rich Text Editor Development Prompt for CMS and AI Writing
