Кастомная интеграция Quill в CMS: форматы, загрузка, Delta

В одном из проектов на Next.js 14 потребовался rich-text редактор для админки CMS, обрабатывающей до 5000 записей. Стандартный Quill 2.x не подошёл: его тулбар не позволял загружать изображения на сервер, а форматирование таблиц отсутствовало — пришлось бы хранить base64-строки, увеличивающие размер документа на 30–50%. Встроенные модули давали лишь базовые возможности, но для реального продукта требовались кастомные обработчики и поддержка формата Delta. Мы разработали собственные модули, которые интегрируются с React и Vue. Расскажу, какие сложности встретились и как их обошли.

Почему базовый Quill не подходит для CMS?

Типовая установка Quill даёт базовый функционал, но в продакшене возникают проблемы:

• Загрузка изображений. По умолчанию Quill встраивает картинки как base64, что раздувает JSON на 30–50%. Мы пишем кастомный обработчик, который загружает файл на сервер и вставляет URL. Это снижает нагрузку на базу данных и ускоряет загрузку страниц.
• Кастомные модули: таблицы, вложенные списки, цвет текста. Quill расширяется через сторонние плагины, но они не всегда стабильны. Для одного проекта пришлось написать модуль для вложенных списков, так как готовый не поддерживал глубину более 2 уровней.
• Сохранение в Delta vs HTML. Delta удобен для версионирования и совместного редактирования, но часто требуется HTML для вывода. Мы предоставляем оба варианта, конвертируя Delta в HTML с помощью quill-delta-to-html.

Как мы интегрируем Quill с кастомными модулями?

Наш процесс включает:

1. Анализ требований к редактору: кнопки, форматы, загрузка медиа, поддержка мобильных устройств.
2. Проектирование модулей: кастомные обработчики, тема (snow/bubble или своя), настройка тулбара.
3. Реализация: код на React (react-quill-new), Vue или ванильном JS. Пример кастомного обработчика изображений:

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. Тестирование на всех устройствах и браузерах (Chrome, Firefox, Safari, Edge). Проверяем корректную работу SSR, загрузку изображений, конвертацию Delta->HTML.
5. Деплой и документация. Передаём исходники, инструкцию по настройке и поддержку в течение трёх месяцев.

Что даёт формат Delta?

Delta — это массив операций (insert, delete, retain), который легко сохранять, передавать и трансформировать. В отличие от HTML, Delta не теряет семантику форматирования: каждый стиль хранится как атрибут операции. Это позволяет реализовать undo/redo с любым шагом, совместное редактирование через OT-алгоритмы и автоматическое слияние изменений. Как указано в описании формата Delta, размер Delta-объекта обычно на 40% меньше аналогичного HTML при одинаковом контенте. Если ваш проект требует версионирования, Delta — правильный выбор.

Сравнение с альтернативами

Quill выигрывает по скорости загрузки и простоте. Если не нужны сложные вложенные блоки — это лучший выбор. Если вы сомневаетесь, свяжитесь с нами для бесплатной консультации.

Как избежать типичных ошибок при интеграции?

• Забыли отключить SSR для Quill в Next.js — получаете document is not defined. Используйте динамический импорт с ssr: false.
• Используете устаревший react-quill вместо react-quill-new (последний поддерживает React 18 и SSR корректно).
• Не обернули обработчики в useCallback — бесконечная перерисовка.
• Путаете Delta и HTML: при вставке HTML через setContents теряется форматирование. Используйте clipboard.dangerouslyPasteHTML или конвертацию.

Что входит в работу по интеграции?

• Анализ требований и выбор стека (React, Vue, или Next.js)
• Настройка тулбара, модулей, темы
• Кастомный обработчик загрузки изображений
• Экспорт в HTML и/или Delta
• Работа с хуками (onChange, onBlur, validation)
• Документация и обучение команды
• Гарантия на код (3 месяца бесплатной поддержки)

Сроки и стоимость

Срок интеграции Quill с кастомными модулями — от 1 до 3 дней в зависимости от сложности. Стоимость рассчитывается индивидуально после брифа. В среднем такая интеграция оказывается на 30–50% дешевле лицензирования коммерческих редакторов. Получите консультацию инженера бесплатно — свяжитесь с нами для оценки вашего проекта.