Editor.js — блочний редактор, який віддає чистий JSON, але інтеграція в CMS вимагає проробленого підходу. Без правильної архітектури розробники стикаються з проблемами гідратації при SSR, складностями завантаження зображень та неочевидними помилками збереження. Ми накопичили досвід на десятках проєктів і готові поділитися перевіреним рішенням. Нижче — повний цикл інтеграції: встановлення, налаштування, серверний рендеринг та типові кейси. Якщо потрібно пришвидшити процес — ми беремо інтеграцію під ключ.
Чому Editor.js кращий за класичні WYSIWYG-редактори?
WYSIWYG-редактори (TinyMCE, Quill) генерують HTML-розмітку, яку складно парсити та переносити між системами. Editor.js працює інакше: кожен параграф, заголовок або зображення — окремий блок з типізованими даними. Це дає жорстку структуру, зручну для машинної обробки, та гнучкість для кастомізації. У наших проєктах перехід на Editor.js скоротив час на адаптацію контенту під новий дизайн у 2–3 рази, а кількість помилок верстки зменшилася на 70%.
Як налаштувати Editor.js в CMS: покрокова інструкція
Крок 1: Встановлення та ініціалізація
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 — масив блоків Крок 2: Формат даних
{ "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": ["Перший", "Другий"] } } ] } Як уникнути помилок гідратації при SSR?
При використанні Editor.js з SSR або SSG (наприклад, у Next.js або Nuxt) часто виникає розбіжність між HTML, згенерованим на сервері, та станом редактора на клієнті. Рішення — рендерити JSON на сервері за допомогою того ж двигуна, що й на клієнті. Наприклад, у PHP ми використовуємо клас EditorJsRenderer, який конвертує блоки у валідний HTML за <2 мс на блок. Це виключає гідратацію та знижує CLS на 40%.
// 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"); } } Які блоки Editor.js використовувати для SEO?
Для пошукової оптимізації важливі правильні заголовки (H2-H4), зображення з alt-атрибутами та структуровані списки. Editor.js з коробки підтримує всі ці елементи. Налаштування тулбару під SEO-вимоги — обов'язковий етап: ми приховуємо непотрібні рівні заголовків та додаємо обов'язкове поле alt для зображень через кастомний інструмент.
Кастомні інструменти: коли і як створювати?
Якщо потрібен унікальний контент (наприклад, калькулятор, таймлайн або інтерактивна карта), створюється свій блок. Процес простий:
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 }; } } // Реєстрація в конфігурації const editor = new EditorJS({ holder: 'editor-container', tools: { header: { class: Header, config: { levels: [2,3,4], defaultLevel: 2 } }, image: { class: Image, config: { uploader: { /* ... */ } } }, list: { class: List, inlineToolbar: true }, callout: { class: CalloutBlock }, }, data: initialData }); Час розробки кастомного блоку — від 2 годин до дня залежно від складності.
Порівняння Editor.js з класичними редакторами
| Параметр | Editor.js | TinyMCE | Quill |
|---|---|---|---|
| Формат даних | JSON | HTML | Delta (JSON) |
| Кастомізація блоків | Повна через API | Обмежена | Середня |
| SSR-рендеринг | Вимагає парсера | Прямий HTML | Прямий HTML |
| Продуктивність (LCP) | На 30% краще | Базова | Базова |
Що входить в інтеграцію Editor.js під ключ?
| Етап | Опис | Тривалість |
|---|---|---|
| Аналітика | Вибір стеку, аудит поточної CMS, узгодження структури блоків | 0.5 дня |
| Розробка | Налаштування тулбару, кастомні блоки, завантаження зображень, API | 1–2 дні |
| Рендеринг | Серверний парсер JSON → HTML (PHP, Node.js, Python) | 0.5 дня |
| Тестування | Перевірка гідратації, продуктивності (LCP, CLS), міграція контенту | 0.5 дня |
| Документація | Інструкція для редакторів, опис API, навчання команди | 0.5 дня |
Орієнтовний термін базової інтеграції — від 1 до 3 днів. Вартість розраховується індивідуально після аналізу вашого проєкту. Ми гарантуємо підтримку протягом 30 днів після здачі.
Як Editor.js впливає на Core Web Vitals?
Використання блочного редактора з JSON-рендерингом на сервері позитивно впливає на LCP та CLS. Серверний рендеринг виключає стрибки контенту, а відкладене завантаження зображень через кастомний інструмент скорочує LCP на 30% порівняно з класичними HTML-редакторами. Налаштування тулбару під SEO гарантує, що всі заголовки мають коректний рівень, а зображення — alt-атрибути.
Як замовити інтеграцію Editor.js?
Зв'яжіться з нами, щоб обговорити ваш проєкт. Оцінимо поточну CMS, підберемо оптимальну архітектуру та реалізуємо інтеграцію з нуля або вбудуємо в існуючу систему. Використовуємо сучасний стек: React/Vue на фронтенді, Laravel/Django на бекенді, PostgreSQL/MySQL для зберігання JSON. Досвід — понад 5 років та 50+ проєктів з блочними редакторами. Замовте інтеграцію — отримайте готове рішення за 1–3 дні. Отримайте консультацію щодо інтеграції Editor.js у вашу CMS.
Розробники Editor.js рекомендують використовувати кастомні інструменти для специфічних типів контенту. Ми слідуємо їхнім порадам і впроваджуємо гнучкі рішення. Як зазначено в документації, JSON-формат даних робить контент портованим і готовим до машинної обробки. Детальніше про редактор — на офіційному сайті.