Custom Quill Integration for CMS: Delta, Image Upload & Modules

In a Next.js 14 project, we needed a rich-text editor for a CMS admin panel handling up to 5000 records. The standard Quill 2.x didn't fit: its toolbar couldn't upload images to the server, and table formatting was missing—we'd have to store base64 strings, inflating document size by 30–50%. The built-in modules provided only basic features, but a real product required custom handlers and Delta format support. We developed custom modules that integrate with React and Vue. Let me walk you through the challenges we encountered and how we solved them.

Why Basic Quill Doesn't Suit CMS

A typical Quill setup gives basic functionality, but in production you run into issues:

• Image upload. By default, Quill embeds images as base64, bloating JSON by 30–50%. We write a custom handler that uploads the file to the server and inserts the URL. This reduces database load and speeds up page loading.
• Custom modules: tables, nested lists, text color. Quill is extendable via third-party plugins, but they aren't always stable. For one project, we had to write a module for nested lists because the ready-made one didn't support depths beyond 2 levels.
• Saving in Delta vs HTML. Delta is convenient for versioning and collaborative editing, but HTML is often needed for output. We provide both by converting Delta to HTML using quill-delta-to-html.

How We Integrate Quill with Custom Modules

Our process includes:

1. Analyze editor requirements: buttons, formats, media upload, mobile support.
2. Design modules: custom handlers, theme (snow/bubble or custom), toolbar configuration.
3. Implementation: code in React (react-quill-new), Vue, or vanilla JS. Example custom image handler:

const imageHandler = () => {
  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');
  input.click();
  input.onchange = async () => {
    const file = input.files[0];
    const formData = new FormData();
    formData.append('image', file);
    const response = await fetch('/api/media/upload', {
      method: 'POST',
      body: formData
    });
    const { url } = await response.json();
    const quill = quillRef.current.getEditor();
    const range = quill.getSelection(true);
    quill.insertEmbed(range.index, 'image', url);
  };
};

const MODULES = {
  toolbar: {
    container: [...],
    handlers: {
      image: imageHandler
    }
  }
};

4. Test on all devices and browsers (Chrome, Firefox, Safari, Edge). Verify SSR correctness, image upload, Delta->HTML conversion.
5. Deploy and document. We deliver source code, setup instructions, and three months of support.

What Delta Format Offers

Delta is an array of operations (insert, delete, retain) that is easy to store, transmit, and transform. Unlike HTML, Delta preserves formatting semantics: each style is stored as an operation attribute. This enables undo/redo at any step, collaborative editing via OT algorithms, and automatic merge of changes. As described in the Delta format documentation, a Delta object is typically 40% smaller than equivalent HTML for the same content. If your project requires versioning, Delta is the right choice.

Comparison with Alternatives

Quill wins on load speed and simplicity. If you don't need complex nested blocks, it's the best choice. If unsure, contact us for a consultation.

How to Avoid Common Integration Mistakes

• Forgetting to disable SSR for Quill in Next.js gives document is not defined. Use dynamic import with ssr: false.
• Using outdated react-quill instead of react-quill-new (the latter supports React 18 and SSR correctly).
• Not wrapping handlers in useCallback—infinite re-renders.
• Confusing Delta and HTML: inserting HTML via setContents loses formatting. Use clipboard.dangerouslyPasteHTML or conversion.

What's Included in the Integration Work

• Requirements analysis and stack choice (React, Vue, or Next.js)
• Toolbar, modules, theme configuration
• Custom image upload handler
• Export to HTML and/or Delta
• Hook integration (onChange, onBlur, validation)
• Documentation and team training
• Code warranty (3 months free support)

Timeline and Cost

Integration of Quill with custom modules takes 1 to 3 days depending on complexity. The cost is calculated individually after brief. On average, such integration is 30–50% cheaper than licensing commercial editors. Get an engineer consultation—contact us to evaluate your project.