Соберите свой первый редактор на Blok
Подключите Blok, добавьте контент и сохраните его в JSON, который можно хранить и загружать обратно — полный цикл за пять шагов.
Это практическое пошаговое руководство. К концу у вас будет рабочий редактор, вы сохраните его содержимое в JSON и загрузите этот JSON обратно — цикл, на котором построено всё остальное в Blok.
Подключите редактор
Укажите Blok элемент на странице и создайте экземпляр. Blok не поставляет блочные инструменты, поэтому зарегистрируйте paragraph в карте tools — это инструмент, к которому сводится блок по умолчанию, и без него первый блок отрисуется заглушкой «This block cannot be displayed» вместо редактируемой строки. Как только isReady разрешится, у вас будет живой редактор с пустым параграфом, готовым к вводу.
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;Напишите контент
Кликните и печатайте. Нажмите Enter, чтобы начать новый блок, или /, чтобы открыть меню инструментов и выбрать заголовок, список или цитату. Каждая строка — это отдельный блок.
Сохраните в JSON
Вызовите save(), чтобы получить контент в виде обычного объекта. Никакого HTML для разбора и скрытого состояния — только блоки, которые можно хранить где угодно.
const data = await editor.save();
console.log(data);
// {
// time: 1719000000000,
// blocks: [
// { id: 'a1b2c3', type: 'paragraph', data: { text: 'Hello, Blok' } },
// ],
// version: '1.13.0', // the installed Blok package version
// }Этот объект — самое главное. Это переносимый JSON, который можно положить в базу данных, файл или API, — и именно его вы загрузите обратно на следующем шаге.
Загрузите обратно
Передайте тот же объект в render(), и Blok восстановит контент в точности. Сохраняйте при выгрузке, отрисовывайте при загрузке — вот и вся персистентность.
// On the next page load, hand the same object back:
await editor.render(data);Добавьте инструмент
Blok поставляется минимальным — сам он не регистрирует ни одного блочного инструмента. Зарегистрируйте нужные в конфигурации tools, и они появятся в меню /, готовые к использованию. Оставьте paragraph в этой карте: набора по умолчанию, к которому можно откатиться, нет, поэтому каждый нужный тип блока приходится перечислять явно, включая блок по умолчанию.
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.