Плагин

Архитектура и интеграция

Плагин Emailmaker — это встраиваемый редактор писем и блоков. Его можно встроить на любую веб-страницу: интерфейс редактора отображается внутри указанного вами элемента (контейнера), а данные и авторизация настраиваются через опции и колбэки.

Основные возможности:

Визуальное и кодовое редактирование писем и блоков
Настройка интерфейса (кнопки, панели, тема)
Гибкая работа с данными: через API Emailmaker или через ваши обработчики (чтение/сохранение на своей стороне)
Два варианта авторизации: JWT (логин/пароль) или OAuth (токен через колбэк)

Плагин изолирован от страницы: не использует ваш роутинг и куки, не меняет глобальное состояние страницы. Вся связь с вашим приложением идёт через один вызов инициализации и один объект — instance.

Архитектура

┌─────────────────────────────────────────────────────────────┐
│  Ваше приложение (хост)                                     │
│  • Страница с контейнером для редактора                     │
│  • Подключённый скрипт плагина                              │
│  • Один вызов init(options) при загрузке                    │
└─────────────────────────────┬───────────────────────────────┘
                              │
                              │  init({ element, content, колбэки, конфиг })
                              ▼
┌───────────────────────────────────────────────────────────────┐
│  Плагин (редактор)                                            │
│  • Рендерится внутри переданного элемента                     │
│  • Имеет свой внутренний state и роутинг (не связан с хостом) │
│  • Запросы к API выполняет сам, используя переданный токен    │
│  • Либо использует ваши колбэки для чтения/сохранения данных. │
└─────────────────────────────┬─────────────────────────────────┘
                              │
                              │  Promise<instance>  и  handleLoad(instance)
                              ▼
┌──────────────────────────────────────────────────────────────────┐
│  Instance (единая точка взаимодействия)                          │
│  • Методы: show(), save(), getEmail(), getBlocks(), setConfig(). │
│  • События: handleSaveEmail, handleEmailChanged, handleLoad      │
│  • Через instance вы управляете контентом и подписываетесь на.   │
│    действия пользователя в редакторе                             │
└──────────────────────────────────────────────────────────────────┘

Основа: вы один раз вызываете init(options) и получаете объект instance. Вся дальнейшая работа — вызов методов instance и подписка на его события. Внутренняя реализация (store, роутинг, редактор в iframe и т.д.) скрыта за этим API.

Быстрая интеграция плагина

1. Подключение скрипта

Добавьте на страницу скрипт плагина:

<script src="путь/к/emailmaker.js"></script>

Либо при использовании модулей:

<script type="module">
  import { init } from "./путь/к/emailmaker-esm.js";
  // ...
</script>

2. Контейнер для редактора

На странице должен быть элемент, в который плагин смонтирует интерфейс:

<div id="editor-container" style="height: 100vh;"></div>

Селектор этого элемента (или сам DOM-элемент) передаётся в init в поле element.

3. Вызов init

Инициализация выполняется один раз, обычно после загрузки страницы:

const instance = await init({
  element: '#editor-container',
  content: { email: { title: 'Черновик', code: '<p>...</p>' } },
  getAuthToken: async (user, project, prevToken) => {
    // Вернуть актуальный токен доступа
    return '...';
  },
  baseUrl: 'https://api.example.com',
  handleLoad(instance) {
    // Плагин готов к работе
    console.log('Редактор загружен', instance);
  },
});

После выполнения init переменная instance — это объект с методами и событиями, описанными ниже. Тот же объект передаётся в handleLoad(instance), если вы указали этот колбэк.

Жизненный цикл

Подключение — на страницу добавлен скрипт плагина и контейнер (element).
Инициализация — вызов init(options). Плагин монтирует интерфейс в element, при необходимости ждёт появления элемента в DOM (если передан селектор).
Готовность — когда редактор готов, вызывается handleLoad(instance) (если передан) и Promise от init() резолвится значением instance.
Работа — вы вызываете instance.show(), instance.save(), подписываетесь на события, при необходимости меняете конфиг через setConfig/updateConfig.
Повторная инициализация — при повторном вызове init() с тем же DOM-элементом плагин может вернуть тот же instance и обновить опции (поведение эквивалентно «reset» без полного пересоздания).
Завершение — при необходимости вы вызываете instance.destroy() и больше не используете instance.

Хранение данных

Шаблоны писем клиенты хранят у себя
Ревизии хранят у себя , но с недавнего времени можно и в EmailMaker .
Свои блоки на стороне клиента
Общие на EmailMaker
Картинки хранятся на нашем CDN, но пользователь может хранить у себя (переопределить их используется чаще всего в замкнутых контурах)
Данные с файловый менеджера храним у себя в EmailMaker,
однако на нашем Api можно реализовать работу с файлами самим.

Наша команда по возможности предоставляет доступ к хранению информации со стороны клиента и мы настоятельно рекомендуем это использовать.