В одном из проектов на 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.
| Проблема | Решение | Время реализации | Экономия по сравнению с коммерческим редактором |
|---|---|---|---|
| base64-изображения | кастомный обработчик с загрузкой на сервер | 2–4 часа | существенное снижение затрат |
| отсутствие таблиц | плагин quill-better-table |
1–2 часа | — |
| сложная кастомизация | создание собственного модуля на основе Quill API | от 1 дня | значительная экономия на лицензиях |
Как мы интегрируем Quill с кастомными модулями?
Наш процесс включает:
- Анализ требований к редактору: кнопки, форматы, загрузка медиа, поддержка мобильных устройств.
- Проектирование модулей: кастомные обработчики, тема (snow/bubble или своя), настройка тулбара.
- Реализация: код на 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 }
}
};
- Тестирование на всех устройствах и браузерах (Chrome, Firefox, Safari, Edge). Проверяем корректную работу SSR, загрузку изображений, конвертацию Delta->HTML.
- Деплой и документация. Передаём исходники, инструкцию по настройке и поддержку в течение трёх месяцев.
Что даёт формат Delta?
Delta — это массив операций (insert, delete, retain), который легко сохранять, передавать и трансформировать. В отличие от HTML, Delta не теряет семантику форматирования: каждый стиль хранится как атрибут операции. Это позволяет реализовать undo/redo с любым шагом, совместное редактирование через OT-алгоритмы и автоматическое слияние изменений. Как указано в описании формата Delta, размер Delta-объекта обычно на 40% меньше аналогичного HTML при одинаковом контенте. Если ваш проект требует версионирования, Delta — правильный выбор.
Сравнение с альтернативами
| Критерий | Quill 2.x | TinyMCE 6 | CKEditor 5 |
|---|---|---|---|
| Размер бандла (min+gzip) | ~40 КБ | ~200 КБ | ~300 КБ |
| Формат данных | Delta (JSON) | HTML | HTML/JSON |
| Кастомизация | Средняя (API модулей) | Высокая (плагины) | Высокая (UI) |
| Таблицы | Плагин | Встроенные | Встроенные |
| Годовая лицензия (руб.) | 0 (открытый код) | от 100 000 | от 150 000 |
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% дешевле лицензирования коммерческих редакторов. Получите консультацию инженера бесплатно — свяжитесь с нами для оценки вашего проекта.