Copy-paste prompt · Quill # Add image upload to your Quill editor in one prompt Quill is a contenteditable editor, so it uses PixelVault's upload helper rather than the textarea widget. This prompt wires paste + drop to upload images and insert them with Quill's embed API — no upload backend. Copy it into your AI coding agent. Works with `Claude Code``Cursor``Windsurf``Copilot` 1. 1 **Copy the prompt** The one big button below. 2. 2 **Paste it into your agent** In your project — Claude Code, Cursor, etc. 3. 3 **Drop in your key** Swap `pv_pub_REPLACE_ME` for a free key. Done. Prompt for your coding agent Copy prompt Add image paste-and-host to my Quill editor using PixelVault. Context — read this first and use only the documented API: - Overview + API: https://pixelvault.dev/llms.txt - PixelVault upload helper (from @pixelvault-dev/paste): import { uploadImage } from "@pixelvault-dev/paste"; const { url } = await uploadImage(file, { publishableKey: "pv\_pub\_REPLACE\_ME" }); // returns { id, url, mimeType, size }; throws PixelVaultPasteError on failure Important: Quill is a contenteditable editor, not a , so do NOT use the paste-react/usePaste widget here — use uploadImage() directly. Do this: 1. Install: npm install @pixelvault-dev/paste 2. On my Quill instance, listen for image files pasted or dropped into the editor: add "paste" and "drop" listeners on quill.root, pull any image File out of event.clipboardData / event.dataTransfer, and call event.preventDefault() so Quill doesn't try to insert the raw image data itself. 3. For each image file: call uploadImage(file, { publishableKey }), and on success insert it with Quill's documented embed API at the current selection: const range = quill.getSelection(true); quill.insertEmbed(range.index, "image", url, "user"); quill.setSelection(range.index + 1); Show a fallback if the upload throws PixelVaultPasteError. 4. Use my publishable key where I wrote pv\_pub\_REPLACE\_ME (I'll paste my own). Rules: - For the PixelVault part, use ONLY uploadImage(file, options) as documented above — do NOT invent PixelVault endpoints, options, or other packages. - Use Quill's own documented insertEmbed(index, "image", url) API for insertion. - Don't block the editor on the upload; insert the image when the URL resolves. ## What the agent will do - Install `@pixelvault-dev/paste` (core) - Listen for pasted/dropped images on `quill.root`, upload via `uploadImage()` - Insert with `quill.insertEmbed(i, 'image', url)` - No backend changes — uploads go straight to PixelVault with your key ## Grab your free key The one thing the agent can't generate is your **publishable key** (`pv_pub_…`) — it's origin-scoped and upload-only, safe to ship in browser code. Create one, add your app's origin, and paste it in. [Get your free key →](/signup) Free tier: 200 MB storage, 500 uploads/mo, 1 GB bandwidth. No card. ## How this differs from the textarea prompts The [React](/prompts/react-image-paste), [Vue](/prompts/vue-image-paste), and [plain-HTML](/prompts/html-image-paste) prompts use our drop-in widget, which attaches to a `<textarea>`. Quill renders a contenteditable surface, so the widget can't attach to it — you upload the file yourself with the lower-level `uploadImage()` helper and insert with Quill's embed API, exactly like the [TipTap](/prompts/tiptap-image-paste) and [Lexical](/prompts/lexical-image-paste) prompts. ## The PixelVault part, by hand Everything editor-specific is standard Quill. The only PixelVault call is one function: ``` import { uploadImage } from "@pixelvault-dev/paste"; const { url } = await uploadImage(file, { publishableKey: "pv_pub_xxxxxxxx", }); // then insert at the caret with Quill's embed API: const range = quill.getSelection(true); quill.insertEmbed(range.index, "image", url, "user"); quill.setSelection(range.index + 1); ``` Wire the upload into `paste`/`drop` listeners on `quill.root`, and insert on success. The [docs](/docs#paste) and [`llms.txt`](/llms.txt) have the full reference. ## Why a prompt instead of docs? Because "add image upload to my Quill editor" is exactly what you'd hand a coding agent — and it needs to know to use `uploadImage()` plus Quill's `insertEmbed`, not guess at a nonexistent widget. This prompt grounds the PixelVault call and lets the agent handle Quill's API. Copy, paste, ship. ## FAQ How do I add image upload to a Quill editor? Copy the prompt above into your AI coding agent. Because Quill is contenteditable (not a textarea), it uses PixelVault's `uploadImage()` helper on paste/drop of image files, then inserts the returned CDN URL with `quill.insertEmbed(index, "image", url)`. Why doesn't the usePaste widget work with Quill? The `usePaste` / `attachPaste` widget attaches to a `<textarea>` or `<input>`. Quill renders a contenteditable surface, so you upload with the lower-level `uploadImage()` function and insert with Quill's `insertEmbed` API instead. Do I need an upload backend for Quill image uploads? No. `uploadImage()` sends the file straight from the browser to PixelVault with an origin-scoped, upload-only publishable key. There's no server route to build.