Перейти к основному содержанию

Руководства

Встраивание

Основные концепции

Модель блока

Ядро EditorData: массив blocks, содержащий объекты Block, которые сохраняют порядок. Каждый Block несёт свой тип, данные, специфичные для типа, и необязательные метаданные tunes.

ПолеТипОписание
idstring | undefinedНеобязательный уникальный идентификатор, назначается редактором при создании.
typeBlockToolTypeЛитеральный ключ, связывающий блок с его схемой, компонентом ввода и рендерером.
dataobjectОбъект данных, специфичный для типа: структура различается для каждого типа блока.
tunesBlockTunes | undefinedНеобязательный кроссовый словарь метаданных tune. Ключ: имя tune, значение: данные в свободной форме.
JSON
{
  "time": 1745000000000,
  "version": "1.0.0",
  "blocks": [
    {
      "id": "abc123",
      "type": "header",
      "data": { "html": "Hello world", "level": "h1" }
    },
    {
      "id": "def456",
      "type": "paragraph",
      "data": { "html": "This is a <b>rich</b> paragraph." }
    }
  ]
}

Инструменты блока vs встроенные инструменты

Инструменты блока создают слоты верхнего уровня непосредственно внутри EditorData. Встроенные инструменты украшают текст внутри html-нагрузки, которую содержит блок. Два слоя полностью разделены: они не могут быть заменены друг другом.

Вывод в формате JSON в первую очередь

Редактор никогда не сохраняет HTML. При вызове editor.data.extract() вы получаете чистый JSON EditorData: полный, включая URL медиафайлов. Этот JSON можно хранить в базе данных, персонализировать или конвертировать в другие форматы.

TypeScript
import { Editor } from '@clepit/core';

const editor = Editor.create({ containerId: 'editor' });

const data = editor.data.extract();
// data: EditorData
// {
//   time: 1745000000000,
//   version: '1.0.0',
//   blocks: [ ... ]
// }

Editor vs Renderer

Editor использует DOM браузера, чтобы пользователь мог редактировать контент (только браузер). Renderer принимает ранее сохранённые EditorData и рендерит их как HTML (может работать в браузере или через SSR).

Настройки блока

Tunes: это тип-независимый слот метаданных для любого типа блока. Ключ: это имя tune, устанавливаемое системой или плагином, а значение типизировано как BlockTuneData: любая комбинация string, number, boolean или null. Tunes могут добавлять семантику без изменения основной структуры данных.

JSON
{
  "id": "abc123",
  "type": "paragraph",
  "data": { "html": "Some text." },
  "tunes": {
    "textAlign": { "alignment": "center" },
    "visibility": { "hidden": false }
  }
}