Перейти к содержимому
ФреймворкJavaScript

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

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

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

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

1

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

Укажите Blok элемент на странице и создайте экземпляр. Blok не поставляет блочные инструменты, поэтому зарегистрируйте paragraph в карте tools.

Блок по умолчанию сводится к этому инструменту, и без него первый блок отрисуется заглушкой «This block cannot be displayed» вместо редактируемой строки. Как только isReady разрешится, у вас будет живой редактор с пустым параграфом, который ждёт курсор.

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

const editor = new Blok({
  holder: 'editor', // the id of a <div> on your page
  tools: {
    paragraph: Paragraph, // the default block every empty editor starts with
  },
});

await editor.isReady;
2

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

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

3

Сохраните в JSON

Вызовите save(), чтобы получить контент в виде обычного объекта. Структура задаётся типизированным JSON без скрытого состояния: только блоки, которые можно хранить где угодно. Строчная разметка хранится в полях с форматированным текстом как массив фрагментов { text, marks }.

TypeScript
const data = await editor.save();

console.log(data);
// {
//   time: 1719000000000,
//   blocks: [
//     { id: 'a1b2c3', type: 'paragraph', data: { text: 'Hello, Blok' } },
//   ],
//   version: '1.16.0', // 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, и они появятся в меню /, готовые к использованию.

Оставьте paragraph в этой карте. Набора по умолчанию, к которому можно откатиться, нет, поэтому перечислить нужно каждый тип блока, который вам нужен, включая блок по умолчанию.

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

const editor = new Blok({
  holder: 'editor',
  tools: {
    paragraph: Paragraph, // keep the default block registered
    header: Header,
    list: List,
    quote: Quote,
  },
});

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

Теперь у вас должно быть три вещи.

  • Рабочий редактор на странице.
  • Объект data из editor.save() с вашими блоками внутри.
  • Тот же объект, который без ошибок загружается через editor.render().

Если все три пункта на месте, цикл сохранения и загрузки работает. На нём построено всё остальное в Blok.

Что дальше

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