Плагин

Конфигурация редактора

Конфигурация задаётся объектом с несколькими уровнями вложенности: внешний вид редактора, стартовое содержимое и обработчики событий.

Повторный вызов init на тот же DOM-элемент внутри приводит к reset с новыми опциями — не запускайте параллельно два init на один контейнер.

element

Строка-селектор, Element или DocumentFragment: контейнер, куда монтируется редактор. Если элемент не задан, приложение может работать в фоновом режиме без видимого контейнера.

content

Секция content задаёт данные для редактора. Варианты:

{string}
HTML-разметка письма.

{object} параметры письма

{
  id?: string; // Уникальный ID письма в вашей системе.
  html?: string; // HTML письма.
  subject?: string; // Тема письма.
  preheader?: string; // Прехедер.
}

{object} шаблон, блоки, комментарии

{
  templateId?: string | number; // ID шаблона в EmailMaker.
  email?: object; // параметры письма (см. выше).
  blocks?: []; // блоки.
  comments?: []; // комментарии к письму.
}

Сменить контент после инициализации: instance.show(content).

Стили контента (`commonStyles`)

Не путать с config: объект commonStyles передаётся на верхнем уровне init / reset (тип ExportedApi.AppConfigMixin.Options).

Дефолт из сборки: именованный экспорт COMMON_STYLES (см. исходник src/constants/commonStyles.defaults.ts, там же подробный JSDoc для IDE).
Частичное переопределение: можно передать только нужные ветки (например { block: { backgroundColor: '#000' } }) — приложение сливает их с COMMON_STYLES, чтобы панель «Стили контента», iframe и список общих блоков не ломались на «дырах» в объекте.
Приоритет: сохранённое email.common_styles важнее, чем init.commonStyles.
Сброс сохранённого в сторе плагина override: commonStyles: undefined в reset или updateConfig (с ключом).
Вкладка в UI: флаг config.commonStylesEnabled (часто true по умолчанию).

Полное описание: docs/plugin-content-styles.md в репозитории EmailMaker.

config

Настройки UI редактора. После init используйте instance.setConfig, instance.updateConfig и instance.getConfig — не методы объекта emailmaker.

Список параметров секции config

Параметр	Описание	Значение по умолчанию
theme	Тема плагина: light, dark.	light
autosaveTimeout	Задержка перед автосохранением, мс.	10000
mergeTags	JSON со списком динамических переменных.	undefined
styles	Строка со стилями в формате CSS.	»

headerShow	Показ шапки.	true
headerArrowBackVisible	Показ стрелки «Назад».	true
headerTitleVisible	Показ поля «Тема».	true
headerPreheaderVisible	Показ поля «Прехедер».	true
historyEnabled	Показ кнопки «История версий».	true
codeEnabled	Показ кнопки «Code-mode».	true
codeModeDirection	Режим показа редактора кода по умолчанию	none
codeSideEnabled	Показ кнопки «Code-mode» в режиме, когда есть переключатель десктоп/мобайл.	true
previewIconEnabled	Показ кнопки «Предпросмотр».	true
previewModeEnabled	Ссылка на Предпросмотр.	true
livePreviewEnabled	Показ кнопки «Тестировние в почтовиках».	true
sendTestEnabled	Показ кнопки «Отправить тест».	true
sharePreviewEnabled	Показ кнопки «Поделиться».	true
webversionEnabled	Показ ссылки на веб-версию.	true
commonStylesEnabled	Показ стилей контента.	true
emailResponsiveControlEnabled	Показ переключателя адаптивности письма.	true
templateNotEmAlertShow	Показ уведомления о том, что шаблон не из EM.	true

emailDropdownMenuEnabled	Показ меню письма.	true
emailDropdownMenuClone	Показ пункта «Клонировать».	true
emailDropdownMenuImport	Показ пункта «Импортировать».	true
emailDropdownMenuImportButton	Показ пункта «Импортировать» кнопкой	true
emailDropdownMenuLock	Показ пункта «Заблокировать».	true
emailDropdownMenuRemove	Показ пункта «Удалить».	true

emailExportEnabled	Показ кнопки «Экспорт».	true
exportHtmlEnabled	Экспорт в HTML.	true
exportZipEnabled	Экспорт в ZIP.	true
exportClipboardEnabled	Экспорт в буфер.	true
exportWebHookEnabled	Экспорт в вебхук.	true
exportOutlookEnabled	Экспорт в Outlook.	true
exportPdfEnabled	Экспорт в PDF.	true
exportPngEnabled	Экспорт в PNG.	true

nextButtonEnabled	Показ второстепенной кнопки.	false
nextButtonText	Текст на второстепенной кнопке.	»
saveButtonEnabled	Показ основной кнопки.	true
saveButtonText	Текст основной кнопки.	»
commandButtonsEnabled	Показ основной и второстепенной кнопки.	true

sidePanelFloating	Плавающая боковая панель.	true
desktopMobileSwitchRule	Полоса переключения режимов.	true
desktopMobileSwitchPanel	Панель переключения режимов.	false
onlyCodeModeInMobile	вывод в мобиле только кода.	false

pathEnabled	Показ хлебных крошек.	true
copyPasteEnabled	Показ копирования-вставки блока в iframe.	true
saveBlockEnabled	Показ кнопки сохранения блока.	true
editImageControlEnabled	Показ кнопки редактирования изображения.	true

menuDirection	Расположение боковой панели.	‘right’
defaultBuildPanel	Настройка открывающейся вкладки по умолчанию.	’empty’/’project’/’common’/’template’
commentsEnabled	Показ кнопки «Комментарии».	true
aiAssistentEnabled	Показ «AI ассистента».	true
optimizeEnabled	Показ кнопки «Оптимизация».	true
optimizeLinksEnabled	Показ проверки ссылок.	true
optimizeImagesEnabled	Показ проверки картинок.	true
optimizeSpamAssassinEnabled	Показ проверки SpamAssassin.	true
optimizeCheckCodeEnabled	Показ проверки кода.	true
settingsEnabled	Показ кнопки «Настройки».	true
UTMEnabled	Показ таба UTM-метки.	true
descriptionEnabled	Показ поля «Описание» в настройках.	true
tagsEnabled	Показ поля Теги в настройках.	true
switchDesktopMobilePropsEnabled	Показ переключателя мобильных свойств.	true
stepToOtherElementEnabled	Показ кнопок перехода к другим элементам.	true
deleteButtonEnabled	Показ кнопки удаления элемента.	true
toggleSidePanel	Возможность схлопывать боковую панель.	true
blocksSectionsShow	Показ меню блоков.	true
blocksEmptyEnabled	Показ пустых блоков.	true
blocksSavedEnabled	Показ сохранённых блоков.	true
blocksCommonEnabled	Показ общих блоков.	true
blocksTemplateEnabled	Показ блоков шаблона.	true
blocksSearchEnabled	Показ поиска по блокам.	true
blocksAddPanelEnabled	Показ панели добавления блока в визуальном редакторе.	true
imagePathDropdownEnabled	Показ выпадашки с путём к изображению.	true

formFieldImageTitleEnabled	Показ поля title в форме картинки.	true
formFieldBorderEnabled	Показ полей изменения рамки.	true
formFieldBorderRadiusEnabled	Показ полей изменения скругления.	true
formFieldBoxShadowEnabled	Показ полей изменения тени.	true
formFieldVisibilityEnabled	Показ кнопок изменения видимости элемента.	true
formFieldExportAsPictureEnabled	Показ переключателя экспорт в картинку.	true

formButtonFieldInsertImageEnabled	Показ кнопки вставки изображения в текст у кнопки.	true
formButtonFieldVerticalAlignEnabled	Показ кнопок вертикального выравнивания у кнопки.	true
formButtonFieldTextAlignEnabled	Показ кнопок выравнивания текста у кнопки.	true
formButtonFieldBackgroundImageEnabled	Показ полей фонового изображения у кнопки.	true
formButtonFieldPaddingsEnabled	Показ полей внутренних отступов у кнопки.	true
formButtonFieldReplacerEnabled	Показ реплейсера у кнопки.	true

formCellFieldVerticalAlignEnabled	Показ кнопок вертикального выравнивания у ячейки.	true
formCellFieldBackgroundImageEnabled	Показ полей фонового изображения у ячейки.	true
formCellFieldPaddingsEnabled	Показ полей внутренних отступов у ячейки.	true
formCellFieldSizeEnabled	Показ полей ширины и высоты.	true

formImageFieldVerticalAlignEnabled	Показ кнопок вертикального выравнивания у картинки.	true
formImageFieldReplacerEnabled	Показ кнопок вертикального выравнивания у картинки.	true
formImageFieldHeightEnabled	Показ поля высоты у картинки.	true

formTableFieldBackgroundImageEnabled	Показ полей фонового изображения у таблицы.	true
formDivFieldBackgroundImageEnabled	Показ полей фонового изображения у контейнера.	true
formEmailFieldBackgroundImageEnabled	Показ полей фонового изображения у письма.	true

formTextFieldTypografEnabled	Показ кнопки типографа.	true
formTextFieldReplacerEnabled	Показ кнопки реплейсера.	true

elementImageEnabled	Элемент Картинка.	true
elementTextEnabled	Элемент Текст.	true
elementHeaderEnabled	Элемент Заголовок.	true
elementButtonEnabled	Элемент Кнопка.	true
elementListULEnabled	Элемент Список UL.	true
elementListOLEnabled	Элемент Список OL.	true
elementDividerEnabled	Элемент Разделитель.	true
elementSpacerEnabled	Элемент Отступ.	true
elementSocialEnabled	Элемент Соцсети	true
elementTableEnabled	Элемент Таблица.	true
elementCountdownEnabled	Элемент Счётчик.	true
elementVideoEnabled	Элемент Видео.	true
elementAIimageEnabled	Элемент AI картинка.	true
elementAItextEnabled	Элемент AI текст.	true
elementCarouselEnabled	Элемент AMP карусель.	true
elementAccordionEnabled	Элемент AMP аккордион.	true
elementFormEnabled	Элемент AMP форма.	true

imageCenterLocalUploadEnabled	Поле загрузки файла с компьютера в Image Center.	true
imageCenterStockEnabled	Таб Стока фотографий.	true
imageCenterGifEnabled	Таб Стока гифок.	true
imageCenterEditorEnabled	Таб редактора изображений.	true
compressMaxSize	Макс. размер файла для клиентского сжатия в файловом менеджере, байт (по умолчанию порядка 5 MiB).	см. типы
compressMaxWidthOrHeight	Макс. ширина/высота после ресайза, px (по умолчанию 2000).	см. типы

Обработка событий

Обработчики передаются в init({ ... }) или подписываются на экземпляре: instance.handle*(listener, priority?). Подписка обычно возвращает функцию отписки. Обработчики могут быть async.

События handleSaveEmail, handleSaveBlock, handleSaveComment получают не сырой объект, а SaveEventPayload: { patch, value, prev?, source? } — полезно сравнивать patch и итоговое value.

handleSubjectChanged и handlePreheaderChanged оформлены иначе: через них подписываются на строковые значения темы и прехедера — см. emailmaker.d.ts.

Пример

emailmaker.init({
  element: '#test',
  content: { email: { id: '1' } },
  getAuthToken,
  handleReadEmail: async (id) => fetchEmail(id),
  handleSaveEmail: async (payload) => saveEmail(payload.value),
}).then((instance) => {
  const unsubscribe = instance.handleEmailChanged(async () => {
    /* ... */
  });
  /* unsubscribe(); */
});

События

Обработчик	Описание
handleReadEmail	Загрузка письма по id с вашего API (аргумент — строка id).
handleSaveEmail	Сохранение письма; полезная нагрузка — `SaveEventPayload` с `value` и `patch`.
handleRemoveEmail	Удаление письма.
handleReadEmailRevisions	Список автосохранений / ревизий для письма.
handleEmailAutosave	Создано автосохранение (`EmailRevision`).
handleRemoveEmailAutoSave	Удалено автосохранение.
handleReadBlocks	Список блоков проекта.
handleReadCommonBlocks	Общие блоки.
handleReadTemplateBlocks	Блоки шаблона в контексте письма.
handleSaveBlock	Сохранение блока (`SaveEventPayload`).
handleRemoveBlock	Удаление блока.
handleReadComments	Комментарии к письму.
handleSaveComment	Сохранение комментария.
handleRemoveComment	Удаление комментария.
handleSaveButtonClick	Клик по основной кнопке (например «Сохранить»).
handleNextButtonClick	Клик по «Далее».
handlePreviousButtonClick	Клик «Назад» в шапке.
handleEmailInit	Инициализирован контур письма.
handleEmailChanged	Изменился параметр письма.
handleHtmlChanged	Изменился HTML-код.
handleSubjectChanged	Изменилась тема (особая подпись — см. типы).
handlePreheaderChanged	Изменился прехедер (особая подпись — см. типы).
handleCloneEmail	Клонирование письма.
handleShareEmail	Поделиться.
handleLivePreviewEmail	Живой предпросмотр.
handlePreviewEmail	Предпросмотр.
handleValidate	Результат проверки кода (`CodeError[]`).
handleTestEmailSend	Отправка тестового письма.
handleTestEmailModal	Открыто окно тестовой отправки.
handleDestroy	Перед уничтожением экземпляра.
handleLoad	Завершена загрузка экземпляра; можно безопасно вызывать `getEmail` и др.
handleLoadImage	Загрузка изображения пользователем; `handleFileProxy`, `handleUrlProxy` — прокси файлов/URL при необходимости.
handleNotify	Произвольное уведомление.
handleError	Ошибка (можно переопределить UI).
handleSuccess	Успешная операция.
handleReadLocale	Язык интерфейса (`AppConfigMixin`).
handleTranslate	Пользовательский перевод строк.
handleLimitUsage	Отображение квот / лимитов.

Полный перечень и сигнатуры — в emailmaker.d.ts (ExportedApi.DataMixin.Events и смежные миксины).

Методы

Модуль экспортирует init (и именованные символы в ESM). Остальное — методы экземпляра после await emailmaker.init(...).

Метод	Описание
init	Асинхронная инициализация: `Promise<Instance>`.
show	Подмена контента (строка или объект `Content`).
save	Сохранить текущее письмо по цепочке приложения.
getEmail	Текущее письмо; для скомпилированных полей см. `compileEmail` / `CompiledEmail`.
compileEmail	Явная компиляция HTML/AMP/текста; опционально `email` и флаги форматов.
setEmailMeta	Обновить `meta` текущего письма без полной замены.
getBlocks	Блоки в текущем контексте.
getComments	Комментарии.
getEmailRevisions	Ревизии / автосохранения.
getCodeErrors	Ошибки линтера кода в редакторе.
getConfig	Текущий `config`.
setConfig	Полная замена настроек UI.
updateConfig	Глубокое слияние с текущим `config`.
notify	Показать уведомление (строка или объект).
getElement	DOM-узел или фрагмент монтирования.
destroy	Уничтожить экземпляр (вызывайте при размонтировании в SPA).
reset	Переинициализация с новыми `Options` (`Promise<Instance>`).
undoRedoService	Сервис отмены/повтора (`undo`, `redo`, снимки истории и др.).