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-формат даних робить контент портованим і готовим до машинної обробки. Детальніше про редактор — на офіційному сайті.