Інтеграція редактора Editor.js в CMS сайту

Інтеграція редактора Editor.js в CMS сайту

Editor.js — це блочний редактор з чистим JSON-виходом. Кожен параграф, заголовок, зображення — окремий блок з типізованими даними. Це робить вміст структурованим і портативним між платформами.

Встановлення

npm install @editorjs/editorjs @editorjs/paragraph @editorjs/header @editorjs/image
npm install @editorjs/list @editorjs/quote @editorjs/code @editorjs/table

Ініціалізація

import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import Image from '@editorjs/image';
import List from '@editorjs/list';

const editor = new EditorJS({
    holder: 'editor-container',
    placeholder: 'Почніть вводити вміст...',
    tools: {
        header: {
            class: Header,
            config: { levels: [2, 3, 4], defaultLevel: 2 }
        },
        image: {
            class: Image,
            config: {
                uploader: {
                    uploadByFile: async (file) => {
                        const formData = new FormData();
                        formData.append('image', file);
                        const response = await fetch('/api/media/upload', {
                            method: 'POST', body: formData
                        });
                        const data = await response.json();
                        return { success: 1, file: { url: data.url } };
                    }
                }
            }
        },
        list: { class: List, inlineToolbar: true },
        quote: { class: Quote, inlineToolbar: true }
    },
    data: initialData  // JSON з бази даних
});

// Збереження
const savedData = await editor.save();
// savedData.blocks — масив блоків

Формат даних

{
    "time": 1710500000000,
    "blocks": [
        { "type": "header",    "data": { "text": "Заголовок статті", "level": 2 } },
        { "type": "paragraph", "data": { "text": "Текст абзацу <b>з форматуванням</b>." } },
        { "type": "image",     "data": { "file": { "url": "/uploads/photo.jpg" }, "caption": "Підпис" } },
        { "type": "list",      "data": { "style": "ordered", "items": ["Перший", "Другий"] } }
    ]
}

Рендеринг JSON на стороні сервера

Для SSR або серверної генерації HTML з Editor.js JSON:

// PHP: конвертація Editor.js JSON → HTML
class EditorJsRenderer
{
    public function render(array $data): string
    {
        return collect($data['blocks'])->map(fn($block) =>
            match($block['type']) {
                'header'    => "<h{$block['data']['level']}>{$block['data']['text']}</h{$block['data']['level']}>",
                'paragraph' => "<p>{$block['data']['text']}</p>",
                'image'     => "<figure><img src=\"{$block['data']['file']['url']}\" alt=\"{$block['data']['caption']}\"><figcaption>{$block['data']['caption']}</figcaption></figure>",
                'list'      => $this->renderList($block['data']),
                'quote'     => "<blockquote>{$block['data']['text']}<cite>{$block['data']['caption']}</cite></blockquote>",
                default     => ''
            }
        )->implode("\n");
    }
}

Користувацький інструмент

class CalloutBlock {
    static get toolbox() {
        return { title: 'Callout', icon: '<svg>...</svg>' };
    }

    render() {
        this.wrapper = document.createElement('div');
        this.wrapper.className = 'callout-block';
        this.wrapper.contentEditable = true;
        return this.wrapper;
    }

    save(element) {
        return { text: element.innerHTML };
    }
}

Часовий графік інтеграції: 1–2 дні для базового редактора з завантаженням зображень та серверним рендерингом.