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