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