---
title: "Editor.js → Blok: полный справочник миграции"
description: "Полный справочник: переименованные API, аналоги плагинов, соответствие CSS-переменных и шаги проверки после переезда."
source: https://blokeditor.com/ru/migration/reference/
lastmod: 2026-09-07
---

# Справочник по миграции

Все переименования кодмода, карта CSS и совместимость по каждому тулзу.

## Запустите codemod

Сначала предпросмотр, затем применение.

1 Просмотр Просмотреть изменения

```
npx -p @bloklabs/core migrate-from-editorjs ./src --dry-run
```

2 Применить Применить изменения к файлам

```
npx -p @bloklabs/core migrate-from-editorjs ./src
```

### Параметры

--dry-run Предпросмотр изменений без модификации файлов

--verbose Подробный вывод для каждого обработанного файла

--use-library-i18n Использовать встроенные переводы Blok (69 локалей)

## Что изменится

Каждое переименование, которое выполняет codemod, — до и после.

### Импорты

− `import EditorJS from '@editorjs/editorjs';`

+ `import { Blok } from '@bloklabs/core';`

### Импорты инструментов

− `import Header from '@editorjs/header';`

+ `import { Header } from '@bloklabs/core/tools';`

### Типы

− `import type { EditorConfig } from '@editorjs/editorjs';`

+ `import type { BlokConfig } from '@editorjs/editorjs'; // specifier still needs a manual change`

### CSS-селекторы

− `.ce-block`

+ `[data-blok-element]`

### Контейнер по умолчанию

− `<div id="editorjs"></div>`

+ `<div id="blok"></div>`

### Data-атрибуты

− `data-id`

+ `data-blok-id`

## Обновите CSS

Blok заменяет классы Editor.js на data-атрибуты. Перенесите свои стили по этой таблице.

С EditorJS Blok

`.codex-editor` `[data-blok-editor]`

`.ce-block` `[data-blok-element]`

`.ce-block--selected` `[data-blok-selected="true"]`

`.ce-toolbar` `[data-blok-toolbar]`

`.ce-inline-toolbar` `[data-blok-testid="inline-toolbar"]`

`.ce-toolbar__settings-btn` `[data-blok-settings-toggler]`

`.ce-popover` `[data-blok-popover]`

`data-placeholder` `data-blok-placeholder`

## Перенесите свои инструменты

Блочные инструменты переносятся без изменений. Строчные инструменты возвращают MenuConfig — или оберните старый класс и обойдитесь без переписывания.

### Строчный инструмент render() → MenuConfig

− `render() { /* returns an HTMLElement button */ }`

+ `render() { return { icon, name, onActivate, isActive }; }`

### Быстрый путь — wrapLegacyInlineTool

Оберните класс существующего строчного инструмента EditorJS вместо переработки. Обёртка отображает старый API на MenuConfig и сохраняет title, shortcut, sanitize и иконку инструмента. Без неё Blok пропускает устаревший render(), возвращающий HTMLElement, и инструмент молча исчезает.

marker: wrapLegacyInlineTool(MarkerTool)

### Блочные инструменты переносятся без изменений

Blok читает те же ключи — render, save, validate, renderSettings, merge, onPaste и статические toolbox/conversionConfig. При желании добавьте setReadOnly(state) для более дешёвого переключения режима только для чтения.

### Отбрасываемые поля и предупреждения о миграции

Когда Blok загружает legacy-данные в рантайме, он один раз выводит console.warn на каждую пару «блок + поле» с указанием того, что было отброшено; migrateLegacyBlocks из @bloklabs/core/migrate делает то же самое — передача onLossyField заменяет это предупреждение в консоли вашим колбэком. migrate() всегда подставляет такой колбэк, поэтому молчит и возвращает потери в report.lossyFields. Исключение — codemod: в нём жёстко задан пустой приёмник предупреждений, и он мигрирует молча, поэтому, если какое-то из этих полей вам нужно, сверьтесь с таблицей до его запуска.

Блок Отбрасываемые поля

`quote` alignment (caption автоматически переносится в следующий параграф)

`image` withBackground

`linkTool` meta.site_name

`list item` meta.counterType (meta.checked и meta.start переносятся)

`attaches` file.name, file.size, file.extension (метаданные файла теряются, когда блок становится закладкой)

`marker` сама подсветка (Editor.js пишет <mark class="cdx-marker"> без инлайнового цвета; санитайзер marker в Blok не разрешает атрибуты на такой метке, а preflight сбрасывает подсветку <mark> из браузера, поэтому текст сохраняется, но без выделения)

## Проверьте контент

Совместимость зависит от инструментов, которые использует ваш контент, а не от версии Editor.js.

### Работают без изменений

Эти инструменты загружают сохранённые данные как есть.

- `paragraph`
- `header`
- `code`
- `embed`
- `inlineCode`
- `audio`

### Мигрируются автоматически

Конвертируются общей legacy-грамматикой — одни и те же правила работают и в рантайме, и в codemod.

- `list`
- `checklist`
- `toggleList`
- `callout`
- `image`
- `simple-image`
- `linkTool`
- `delimiter`
- `quote`
- `table`
- `raw`
- `warning`
- `attaches`

### Не входят в комплект

У Blok нет эквивалента — зарегистрируйте свой инструмент или оставьте инструмент Editor.js.

- `personality`
- `button`

Неизвестные типы блоков отображаются как заглушки с предупреждением "Tool «name» is not found" в консоли. Их данные сохраняются — зарегистрируйте инструмент позже, и блок вернётся.