Інтеграція редактора 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 робочий день з користувацьким обробником зображень.