🔍 Сравнение блоков Editor.js
Здесь показана структура данных всех блоков редактора и их визуальное отображение
Карточка обзора
type: "CardReviewBlock"
JSON данные - Изображение справа
{
"type": "CardReviewBlock",
"data": {
"isRightImage": true,
"image": "../../src/shared/assets/images/slider-cards-1.jpg",
"title": "Заголовок карточки<br>Вторая строка",
"description": "Описание карточки с <b>жирным текстом</b> и <i>курсивом</i>",
"action": "Подробнее"
}
}
⚠️ action в Editor.js сохраняется как объект {text, href}, но компонент
CardReview принимает только строку text.
Визуальное сравнение
JSON данные - Изображение слева
{
"type": "CardReviewBlock",
"data": {
"isRightImage": false,
"image": "../../src/shared/assets/images/slider-cards-1.jpg",
"title": "Другой заголовок<br>С переносом",
"description": "Другое описание с <b>форматированием</b>",
"action": "Узнать больше"
}
}
⚠️ action в Editor.js сохраняется как объект {text, href}, но компонент
CardReview принимает только строку text.
Выпадающий список (Аккордеон)
type: "AccordionBlock"
JSON данные
{
"type": "AccordionBlock",
"data": {
"accordions": [
{
"title": "Первый аккордеон<br>С переносом",
"content": "Контент первого аккордеона с <b>форматированием</b>",
"expanded": true
},
{
"title": "Второй аккордеон",
"content": "Контент второго аккордеона с <i>курсивом</i>",
"expanded": false
}
],
"multiple": true
}
}
ℹ️ multiple определяет, можно ли раскрывать несколько аккордеонов одновременно.
expanded задает начальное состояние.
Визуальное сравнение
🔧 Из Editor.js (HTML)
Контент первого аккордеона с форматированием
Контент второго аккордеона с курсивом
🎨 Из верстки (Astro)
Простой ответ без форматирования
Второй ответ
Ссылка на другой раздел
type: "ButtonVerboseBlock"
JSON данные
{
"type": "ButtonVerboseBlock",
"data": {
"buttons": [
{
"description": "Полное руководство по функциям<br>Вторая строка",
"text": "Документация",
"href": "/documentation"
},
{
"description": "Начните торговать прямо сейчас",
"text": "Скачать терминал",
"href": "/download"
}
]
}
}
⚠️ href хранится в JSON, но компонент ButtonVerbose не использует его (всегда href="#")
Видео
type: "ModalVideoNewBlock"
JSON данные
{
"type": "ModalVideoNewBlock",
"data": {
"title": "Видео урок о торговле",
"imageSrc": "../../src/shared/assets/images/slider-cards-1.jpg",
"videoSrc": "https://rutube.ru/play/embed/b94641748c2a4ab5ee5b399d9556ab85"
}
}
⚠️ imageName - это имя файла из assets, не полный URL. videoSrc передается через parent
компонент ModalVideo.
Визуальное сравнение
🔧 Из Editor.js (HTML)
Видео урок о торговле
🎨 Из верстки (Astro)
Две колонки с изображением
type: "TableTwoColumnsBlock"
JSON данные - Изображение слева
{
"type": "TableTwoColumnsBlock",
"data": {
"align": "left",
"imageSrc": "../../src/shared/assets/images/slider-cards-1.jpg",
"imageAlt": "Окно маркетов",
"content": "<h5>Окно Смотреть маркеты</h5><br><p>Данные хранятся на вашем компьютере или сервере, в зашифрованном виде. <b>Никто не имеет доступа</b> к вашим данным.</p>"
}
}
ℹ️ align: "left" или "right" определяет расположение изображения.
content может содержать HTML.
Визуальное сравнение
🔧 Из Editor.js (HTML)
Окно Смотреть маркеты
Данные хранятся на вашем компьютере или сервере, в зашифрованном виде. Никто не имеет доступа к вашим данным.
🎨 Из верстки (Astro)
Заголовок из верстки
Обычный текст без форматирования из верстки
JSON данные - Изображение справа
{
"type": "TableTwoColumnsBlock",
"data": {
"align": "right",
"imageSrc": "../../src/shared/assets/images/slider-cards-1.jpg",
"imageAlt": "Другое изображение",
"content": "<h5>Другой заголовок</h5><br><p>Текст справа от изображения с <i>курсивом</i> и <b>жирным</b> текстом.</p>"
}
}
ℹ️ align: "left" или "right" определяет расположение изображения.
content может содержать HTML.
Визуальное сравнение
🔧 Из Editor.js (HTML)
Другой заголовок
Текст справа от изображения с курсивом и жирным текстом.
🎨 Из верстки (Astro)
Заголовок из верстки
Текст слева, изображение справа
Двойной блок с текстовым описанием
type: "DoubleBlockWithDescriptionBlock"
JSON данные
{
"type": "DoubleBlockWithDescriptionBlock",
"data": {
"leftBlock": {
"description": "Левый блок с текстом<br>И переносом строки"
},
"rightBlock": {
"description": "Правый блок с <i>форматированием</i>"
}
}
}
ℹ️ Два блока с иконками и описаниями, сетка 2 колонки
Визуальное сравнение
🔧 Из Editor.js (HTML)
Левый блок с текстом
И переносом строки
И переносом строки
Правый блок с форматированием
🎨 Из верстки (Astro)
Чтобы уверенно пользоваться MoonBot и понимать, что происходит на рынке, нужно освоить базовые термины криптотрейдинга. Эти слова встречаются повсюду — в интерфейсе терминала, названиях стратегий, сообщениях в логе, всплывающих подсказках, видеоуроках и Telegram-чатах.
Чтобы уверенно пользоваться MoonBot и понимать, что происходит на рынке, нужно освоить базовые термины криптотрейдинга. Эти слова встречаются повсюду — в интерфейсе терминала, названиях стратегий, сообщениях в логе, всплывающих подсказках, видеоуроках и Telegram-чатах.
Сетка видео в 2 колонки
type: "VideoGridBlock"
JSON данные
{
"type": "VideoGridBlock",
"data": {
"videos": [
{
"title": "Первое видео<br>Subtitle",
"imageSrc": "../../src/shared/assets/images/slider-cards-1.jpg",
"videoSrc": "https://rutube.ru/play/embed/video1"
},
{
"title": "Второе видео",
"imageSrc": "../../src/shared/assets/images/slider-cards-1.jpg",
"videoSrc": "https://rutube.ru/play/embed/video2"
},
{
"title": "Третье видео",
"imageSrc": "../../src/shared/assets/images/slider-cards-1.jpg",
"videoSrc": "https://rutube.ru/play/embed/video3"
},
{
"title": "Четвертое видео",
"imageSrc": "../../src/shared/assets/images/slider-cards-1.jpg",
"videoSrc": "https://rutube.ru/play/embed/video4"
}
]
}
}
ℹ️ Сетка автоматически адаптируется: 2 колонки на десктопе, 1 колонка на мобильных
Визуальное сравнение
🔧 Из Editor.js (HTML)
Первое видео
Subtitle
Второе видео
Третье видео
Четвертое видео
🎨 Из верстки (Astro)
Изображение
type: "ImageBlock"
JSON данные
{
"type": "ImageBlock",
"data": {
"image": "../../src/shared/assets/images/slider-cards-1.jpg",
"alt": "Пример изображения из Editor.js с <b>форматированием</b>"
}
}
ℹ️ Простое изображение с alt текстом
Визуальное сравнение
🔧 Из Editor.js (HTML)
🎨 Из верстки (Astro)
Список
type: "ListBlock"
JSON данные - Маркированный список
{
"type": "ListBlock",
"data": {
"items": [
"Открытие и настройка окна Отчёты",
"Фильтрация и сортировка сделок по ключевым критериям",
"Разбор сделок по стратегии, направлению и результату",
"Использование отчётов для корректировки стратегий",
"Экспорт данных для внешнего анализа."
],
"variant": "bullet"
}
}
ℹ️ variant: "bullet" (маркированный с галочками) или "numeric"
(нумерованный).
items - массив строк, может содержать HTML форматирование.
Визуальное сравнение
🔧 Из Editor.js (HTML)
-
Открытие и настройка окна Отчёты
-
Фильтрация и сортировка сделок по ключевым критериям
-
Разбор сделок по стратегии, направлению и результату
-
Открытие и настройка окна Отчёты
-
Фильтрация и сортировка сделок по ключевым критериям
-
Разбор сделок по стратегии, направлению и результату
-
Использование отчётов для корректировки стратегий
-
Экспорт данных для внешнего анализа.
-
Использование отчётов для корректировки стратегий
-
Экспорт данных для внешнего анализа.
🎨 Из верстки (Astro)
-
Первый элемент
-
Второй элемент
-
Третий элемент
-
Четвертый элемент
-
Пятый элемент
JSON данные - Нумерованный список
{
"type": "ListBlock",
"data": {
"items": [
"Первый шаг инструкции",
"Второй шаг с <b>форматированием</b>",
"Третий шаг процесса",
"Четвертый шаг завершения"
],
"variant": "numeric"
}
}
ℹ️ variant: "bullet" (маркированный с галочками) или "numeric"
(нумерованный).
items - массив строк, может содержать HTML форматирование.
Визуальное сравнение
🔧 Из Editor.js (HTML)
-
Первый шаг инструкции
-
Второй шаг с форматированием
-
Третий шаг процесса
-
Первый шаг инструкции
-
Второй шаг с форматированием
-
Третий шаг процесса
-
Четвертый шаг завершения
-
Четвертый шаг завершения
🎨 Из верстки (Astro)
-
Первый элемент
-
Второй элемент
-
Третий элемент
-
Четвертый элемент
-
Пятый элемент
Сетка карточек событий
type: "CardEventGridBlock"
JSON данные
{
"type": "CardEventGridBlock",
"data": {
"cards": [
{
"text": "Перемещать окна"
},
{
"text": "Выбирать цветовые темы"
},
{
"text": "Скрывать ненужные блоки"
},
{
"text": "Сохранять профили настроек"
}
]
}
}
ℹ️ cards - массив объектов, каждый содержит text. Карточки отображаются в
сетке 4 колонки (десктоп) или 2 колонки (мобильные).
Визуальное сравнение
🔧 Из Editor.js (HTML)
Перемещать окна
Выбирать цветовые темы
Скрывать ненужные блоки
Сохранять профили настроек
🎨 Из верстки (Astro)
Перемещать окна из верстки
Выбирать цветовые темы из верстки
Скрывать ненужные блоки из верстки
Сохранять профили настроек из верстки
Telegram-карточки
type: "TelegramCardsBlock"
JSON данные
{
"type": "TelegramCardsBlock",
"data": {
"title": "Telegram-группы с поддержкой",
"cards": [
{
"title": "Общие вопросы,<br class=\"mobile\" /> технические вопросы,<br class=\"mobile\" /> обсуждения, предложения"
},
{
"title": "Вопросы настроек бота"
}
]
}
}
ℹ️ title - опциональный заголовок блока. cards - массив карточек, каждая содержит
title с текстом (может содержать HTML, включая <br class="mobile" /> для переносов
на мобильных). Минимум 2 карточки.
Визуальное сравнение
🔧 Из Editor.js (HTML)
Общие вопросы,
технические вопросы,
обсуждения, предложения
Вопросы настроек бота
🎨 Из верстки (Astro)
Общие вопросы,
технические вопросы,
обсуждения, предложения
Вопросы настроек бота
Код (pre)
type: "PreBlock"
JSON данные
{
"type": "PreBlock",
"data": {
"text": "function example() {\n const code = \"Пример кода\";\n console.log(code);\n return code;\n}"
}
}
ℹ️ text - текст кода, сохраняет форматирование и пробелы. Блок обернут в editable-content для применения стилей.
Визуальное сравнение
🔧 Из Editor.js (HTML)
function example() {
const code = "Пример кода";
console.log(code);
return code;
}
🎨 Из верстки (Astro)
function example()
Кнопка "Скачать" (ссылка)
type: "DownloadButtonLinkBlock"
JSON данные - Слева
{
"type": "DownloadButtonLinkBlock",
"data": {
"text": "Скачать бесплатно",
"hrefRu": "/download",
"hrefEn": "/download",
"alignment": "left"
}
}
ℹ️ text - текст кнопки. hrefRu и hrefEn - ссылки для скачивания
(RU/EN). alignment - выравнивание: "left", "center" или "right".
JSON данные - По центру
{
"type": "DownloadButtonLinkBlock",
"data": {
"text": "Скачать бесплатно",
"hrefRu": "/download",
"hrefEn": "/download",
"alignment": "center"
}
}
ℹ️ text - текст кнопки. hrefRu и hrefEn - ссылки для скачивания
(RU/EN). alignment - выравнивание: "left", "center" или "right".
JSON данные - Справа
{
"type": "DownloadButtonLinkBlock",
"data": {
"text": "Скачать бесплатно",
"hrefRu": "/download",
"hrefEn": "/download",
"alignment": "right"
}
}
ℹ️ text - текст кнопки. hrefRu и hrefEn - ссылки для скачивания
(RU/EN). alignment - выравнивание: "left", "center" или "right".
Кнопка "Скачать" (файл)
type: "DownloadButtonFileBlock"
JSON данные - Слева
{
"type": "DownloadButtonFileBlock",
"data": {
"text": "Скачать файл",
"fileUrl": "/files/document.pdf",
"fileName": "document.pdf",
"alignment": "left"
}
}
ℹ️ text - текст кнопки. fileUrl - URL файла для скачивания.
fileName - имя файла. alignment - выравнивание: "left", "center" или
"right".
JSON данные - По центру
{
"type": "DownloadButtonFileBlock",
"data": {
"text": "Скачать файл",
"fileUrl": "/files/document.pdf",
"fileName": "document.pdf",
"alignment": "center"
}
}
ℹ️ text - текст кнопки. fileUrl - URL файла для скачивания.
fileName - имя файла. alignment - выравнивание: "left", "center" или
"right".
JSON данные - Справа
{
"type": "DownloadButtonFileBlock",
"data": {
"text": "Скачать файл",
"fileUrl": "/files/document.pdf",
"fileName": "document.pdf",
"alignment": "right"
}
}
ℹ️ text - текст кнопки. fileUrl - URL файла для скачивания.
fileName - имя файла. alignment - выравнивание: "left", "center" или
"right".