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

Руководства

Встраивание

Справочник блоков

Clepit включает 12 встроенных типов блоков. У каждого блока есть структура JSON, рендерер и программный путь вставки через editor.blocks.insert.

Все блоки при сериализации используют одну и ту же оболочку: id, type, data и необязательную запись tunes.

Форма блока

Каждый блок сериализуется в одну и ту же JSON-оболочку. id назначается редактором и может быть опущен при программном построении данных.

JSON
{
  "id": "abc123",
  "type": "paragraph",
  "data": { "html": "Hello <b>world</b>" },
  "tunes": {}
}

alert

Выделенный блок-уведомление с 4 вариантами.

ПолеТипОбязательноОписание
htmlstringДаHTML-содержимое сообщения-предупреждения. Разметка инлайн-инструментов поддерживается.
variant'error' | 'info' | 'success' | 'warning'ДаВизуальный стиль предупреждения. Одно из: error, info, success, warning.
JSON
{
  "type": "alert",
  "data": { "html": "Your session will expire in 5 minutes.", "variant": "warning" }
}

audio

Блок аудио. Обрабатывается через колбэк audioUploader в Editor.create.

ПолеТипОбязательноОписание
urlstringДаURL аудиофайла для встраивания.
captionstringНетПодпись в виде простого текста, отображаемая под плеером.
altstringНетДоступная метка для аудиоэлемента.
alignment'center' | 'left' | 'right'НетГоризонтальное выравнивание плеера. Одно из: center, left, right.
JSON
{
  "type": "audio",
  "data": { "url": "/media/podcast.mp3", "caption": "Episode 12", "alignment": "center" }
}

checklist

Интерактивный список флажков с состоянием отметки для каждого элемента.

ПолеТипОбязательноОписание
itemsChecklistItem[]ДаМассив элементов контрольного списка, каждый с текстом и состоянием отметки.
items[].textstringДаHTML-содержимое метки элемента.
items[].checkedbooleanДаОтмечен ли флажок.
JSON
{
  "type": "checklist",
  "data": {
    "items": [
      { "text": "Install the package", "checked": true },
      { "text": "Mount the editor", "checked": false }
    ]
  }
}

code

Блок кода с подсветкой синтаксиса. Поддерживается 50 языков, среди них typescript, python, rust, go, ruby, swift и kotlin.

ПолеТипОбязательноОписание
codestringДаНеобработанная строка кода для отображения.
languageCodeLanguageНетЯзык подсветки синтаксиса. По умолчанию typescript.
themeCodeThemeНетЦветовая тема редактора. По умолчанию github-dark.
showCopybooleanНетПоказать кнопку копирования в отрендеренном выводе.
JSON
{
  "type": "code",
  "data": { "code": "const x = 42;", "language": "typescript", "theme": "github-dark", "showCopy": true }
}

delimiter

Визуальный разделитель между разделами.

ПолеТипОбязательноОписание
variant'line' | 'stars'ДаВизуальный стиль разделителя. Одно из: line, stars.
JSON
{
  "type": "delimiter",
  "data": { "variant": "line" }
}

Заголовки верхнего уровня и разделов (от h1 до h6). Инлайн-инструменты работают внутри html-нагрузки.

ПолеТипОбязательноОписание
htmlstringДаHTML-содержимое заголовка. Разметка инлайн-инструментов поддерживается.
level'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'НетУровень заголовка. Одно из: h1, h2, h3, h4, h5, h6. По умолчанию h1.
JSON
{
  "type": "header",
  "data": { "html": "Getting started", "level": "h2" }
}

image

Блок изображения с подписью и alt-текстом. Обрабатывается через колбэк imageUploader в Editor.create.

ПолеТипОбязательноОписание
urlstringДаURL изображения для встраивания.
captionstringНетПодпись в виде простого текста, отображаемая под изображением.
altstringНетAlt-текст для элемента изображения.
alignment'center' | 'left' | 'right'НетГоризонтальное выравнивание изображения. Одно из: center, left, right.
JSON
{
  "type": "image",
  "data": { "url": "/img/hero.jpg", "caption": "Hero image", "alt": "A hero", "alignment": "center" }
}

list

Упорядоченный или неупорядоченный список. Каждый элемент: html.

ПолеТипОбязательноОписание
type'ordered' | 'unordered'ДаТип списка. Одно из: ordered, unordered.
itemsstring[]ДаМассив HTML-строк, по одной на каждый элемент списка.
JSON
{
  "type": "list",
  "data": { "type": "unordered", "items": ["First item", "Second item"] }
}

paragraph

Абзац форматированного текста. Принимает разметку инлайн-инструментов, таких как bold, italic, code, link, marker и tooltip.

ПолеТипОбязательноОписание
htmlstringДаHTML-содержимое абзаца. Разметка инлайн-инструментов поддерживается.
JSON
{
  "type": "paragraph",
  "data": { "html": "This is a <b>paragraph</b> with inline markup." }
}

quote

Цитата с необязательным указанием автора.

ПолеТипОбязательноОписание
htmlstringДаHTML-содержимое тела цитаты. Разметка инлайн-инструментов поддерживается.
authorstringНетАтрибуция в виде простого текста или HTML, отображаемая под цитатой.
JSON
{
  "type": "quote",
  "data": { "html": "The best way to predict the future is to invent it.", "author": "Alan Kay" }
}

table

Сетка данных. Первую строку можно использовать как заголовок; каждая ячейка: html.

ПолеТипОбязательноОписание
datastring[][]ДаДвумерный массив строк HTML-ячеек. Первая строка является строкой заголовка.
captionstringНетПодпись в виде простого текста или HTML, отображаемая под таблицей.
showDownloadbooleanНетПоказать кнопку загрузки в отрендеренном выводе.
JSON
{
  "type": "table",
  "data": {
    "data": [["Name", "Type"], ["html", "string"], ["variant", "AlertVariant"]],
    "caption": "AlertData fields",
    "showDownload": false
  }
}

video

Блок видео. Обрабатывается через колбэк videoUploader в Editor.create.

ПолеТипОбязательноОписание
urlstringДаURL видеофайла или ссылка для встраивания YouTube/Vimeo.
captionstringНетПодпись в виде простого текста, отображаемая под плеером.
altstringНетДоступная метка для видеоэлемента.
alignment'center' | 'left' | 'right'НетГоризонтальное выравнивание плеера. Одно из: center, left, right.
JSON
{
  "type": "video",
  "data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}