Интеграция редактора Quill в CMS сайта

Интеграция редактора Quill в CMS сайта

Quill — открытый rich-text редактор с простым API и Delta-форматом данных. Хороший выбор для задач с умеренными требованиями: форматирование текста, изображения, таблицы — без сложных кастомных блоков.

Установка

npm install quill react-quill-new

Использование react-quill-new

import dynamic from 'next/dynamic';
import 'quill/dist/quill.snow.css';

// Динамический импорт для Next.js (SSR не поддерживается)
const ReactQuill = dynamic(() => import('react-quill-new'), { ssr: false });

const MODULES = {
    toolbar: [
        [{ header: [2, 3, 4, false] }],
        ['bold', 'italic', 'underline', 'strike'],
        [{ list: 'ordered' }, { list: 'bullet' }],
        ['blockquote', 'code-block'],
        ['link', 'image'],
        ['clean']
    ],
    clipboard: { matchVisual: false }
};

const FORMATS = ['header', 'bold', 'italic', 'underline', 'strike', 'list', 'blockquote', 'code-block', 'link', 'image'];

function QuillEditor({ value, onChange }) {
    return (
        <ReactQuill
            theme="snow"
            value={value}
            onChange={onChange}
            modules={MODULES}
            formats={FORMATS}
            style={{ height: '400px' }}
        />
    );
}

Кастомный обработчик изображений

По умолчанию Quill вставляет изображения как base64 — плохо для производительности. Нужен кастомный обработчик:

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 }
    }
};

Delta формат данных

Quill хранит контент в формате Delta — массив операций insert/delete/retain:

{
    "ops": [
        { "insert": "Заголовок статьи", "attributes": { "header": 2 } },
        { "insert": "\n" },
        { "insert": "Текст с " },
        { "insert": "жирным", "attributes": { "bold": true } },
        { "insert": " словом.\n" }
    ]
}

Для хранения в БД можно сохранять как JSON или конвертировать в HTML через quill.getHTML(). Delta предпочтительнее для дальнейших трансформаций.

Ограничения Quill

• Нет встроенной поддержки таблиц (только через сторонний плагин quill-better-table)
• Сложная расширяемость для нестандартных блоков
• Версия 2.x всё ещё в активной разработке

Срок интеграции: 1 рабочий день с кастомным обработчиком изображений.