Skip to content
ФреймворкJavaScript

Соберите свой первый редактор на Blok

Подключите Blok, добавьте контент и сохраните его в JSON, который можно хранить и загружать обратно — полный цикл за пять шагов.

Обновлено 30 июн. 2026 г.Редактировать на GitHub

Это практическое пошаговое руководство. К концу у вас будет рабочий редактор, вы сохраните его содержимое в JSON и загрузите этот JSON обратно — цикл, на котором построено всё остальное в Blok.

1

Подключите редактор

Укажите Blok элемент на странице и создайте экземпляр. Как только isReady разрешится, у вас будет живой редактор с пустым параграфом, готовым к вводу.

TypeScript
import { Blok } from '@bloklabs/core';

const editor = new Blok({
  holder: 'editor', // the id of a <div> on your page
});

await editor.isReady;
2

Напишите контент

Кликните и печатайте. Нажмите Enter, чтобы начать новый блок, или /, чтобы открыть меню инструментов и выбрать заголовок, список или цитату. Каждая строка — это отдельный блок.

3

Сохраните в JSON

Вызовите save(), чтобы получить контент в виде обычного объекта. Никакого HTML для разбора и скрытого состояния — только блоки, которые можно хранить где угодно.

TypeScript
const data = await editor.save();

console.log(data);
// {
//   time: 1719000000000,
//   blocks: [
//     { id: 'a1b2c3', type: 'paragraph', data: { text: 'Hello, Blok' } },
//   ],
//   version: '1.4.2', // the installed Blok package version
// }

Этот объект — самое главное. Это переносимый JSON, который можно положить в базу данных, файл или API, — и именно его вы загрузите обратно на следующем шаге.

4

Загрузите обратно

Передайте тот же объект в render(), и Blok восстановит контент в точности. Сохраняйте при выгрузке, отрисовывайте при загрузке — вот и вся персистентность.

TypeScript
// On the next page load, hand the same object back:
await editor.render(data);
5

Добавьте инструмент

Blok поставляется минимальным. Зарегистрируйте нужные инструменты в конфигурации tools, и они появятся в меню /, готовые к использованию.

TypeScript
import { Blok } from '@bloklabs/core';
import { Header, List } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    header: Header,
    list: List,
  },
});

Контрольная точка: как выглядит успех

У вас должен быть рабочий редактор на странице, объект data, полученный из editor.save() с вашими блоками внутри, и тот же объект, который без ошибок загружается обратно через editor.render(). Если все три условия выполнены — цикл сохранения и загрузки работает, а на нём построено всё остальное в Blok.

Что дальше

Создание собственного блок-инструментаСоздайте собственный блок с нуля — отрисовка, редактирование и сохранение как у встроенных.Всё — это блокПоймите единственную идею, на которой построен весь API.