Руководство по работе с HTML редактором

HTML Верстак — это удобный инструмент для создания, редактирования и отправки HTML-шаблонов в N8N для генерации PDF документов

Основные функции

1

Работа с редактором

  • Редактирование кода: В центральной панели находится редактор с подсветкой синтаксиса HTML и CSS

  • Нумерация строк: Автоматическая нумерация для удобной навигации

  • Tab-отступы: Используйте Tab для создания отступов в коде

  • Поиск по коду: Ctrl+F для быстрого поиска текста в коде

Предпросмотр

  • Реальный просмотр: Правая панель показывает, как будет выглядеть ваш HTML

  • Автообновление: Предпросмотр обновляется автоматически при изменении кода

Работа с шаблонами

  • Сохранение шаблонов:

    1. Введите название шаблона

    2. Нажмите "Сохранить"

  • Загрузка шаблонов:

    1. Выберите шаблон из выпадающего списка

    2. Шаблон автоматически загрузится в редактор

  • Удаление шаблонов:

    1. Выберите шаблон

    2. Нажмите "Удалить"

    3. Подтвердите действие

Отправка на WebHook

  • Выбор WebHook:

    • Встроенный WebHook (по умолчанию)

    • Собственный URL WebHook (укажите вручную)

  • Параметры отправки:

    1. Укажите название файла (только латинские буквы, цифры и _)

    2. Добавьте описание (необязательно)

    3. Выберите формат (PDF или PNG). PNG доступен только при отправке на собственный WebHook

    4. Нажмите "Отправить"

Использование переменных

  • Переменные контакта: Используйте {{имя_переменной}} в тексте

  • Системные константы: Ознакомиться со списком доступных констант можно через кнопку "Справка" (?)

  • Автоподстановка: Переменные вставленные в HTML автоматически заменяются на значения переменных пользователей, таким образом пользователь получит актуальный PDF или PNG фавйл

Основная задача редактора состоит в том, что теперь в связке с N8N Вы можете генерировать PDF документы любой сложности. Редактор поддерживает работу с переменными и константами.
2

Доступ к справке

Нажмите кнопку "?" в правом верхнем углу, чтобы открыть:

  • Список доступных переменных

  • Список системных констант

  • Примеры использования

Горячие клавиши

  • Ctrl+F - открыть поиск по коду

  • Enter - следующее совпадение при поиске

  • Shift+Enter - предыдущее совпадение

  • Esc - закрыть поиск

  • F11 - полноэкранный режим

Частые вопросы

Как добавить свой webhook?

  1. Выберите "Собственный webhook" в выпадающем списке

  2. Введите URL вашего webhook

  3. Нажмите "Отправить"

Как использовать переменные?

  1. Убедитесь, что контакт выбран

  2. Введите {{имя_переменной}} в нужном месте кода

  3. При предпросмотре и отправке переменная заменится на значение