Установка

Выполните этот код в командной строке:

$ npm i @emailmaker/[email protected] -save

Добавьте EmailMaker plugin в ваш App config.

Для сборщика Webpack

Импорт пакета:

const emailMakerPlugin = require('@emailmaker/emailmaker/webpack')

Определение пакета в приложении:

module.exports = {
	plugins: [
		new EmailmakerWebpackPlugin(),
	]
}

Для сборщика Vite

Импорт пакета:

import emailMakerPlugin from 'emailmaker/vite'

Определение пакета в приложении:

export default defineConfig({
	plugins: [emailMakerPlugin()],
})

Инициализация

Импортируйте EmailMaker plugin в вашем компоненте:

import * as emailmaker from "@emailmaker/emailmaker"

Параметры инициализации плагина содержат параметр getAuthToken. В него должна быть передана функция, которая запрашивает авторизационный OAuth токен по Client ID и Client Secret.

Получение OAuth токена на бэкенде

curl --location 'https://api.emailmaker.ru/oauth/token' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'client_id=*******' \
--data-urlencode 'client_secret=*******' \
--data-urlencode 'grant_type=client_credentials'

Создание сущности EmailMaker plugin

emailmaker.init({
	getAuthToken: getAuthToken,
	element: "#test",
	content: {
		title: "Email subject",
		html: `КОД_ПИСЬМА`,
	},
	config: { }
}).then(instance => {  })

КОД_ПИСЬМА можно взять из нашего образца или вставить HTML-код своего письма.

Конфигурация

Конфигурация плагина представляет собой JSON с несколькими уровнями вложенности. В конфигурации вы можете настроить внешний вид, содержимое, с которым будет работать плагин и логику.

element

Вы можете передать строку element в конфигурацию плагина. Это селектор DOM-элемента, внутри которого нужно инициализировать плагин. Если элемент не определен, приложение будет запущено в фоновом режиме.

content

Секция content содержит параметры письма, которое нужно отобразить в редакторе. В этот параметр может быть передано:

{string}

HTML верстка письма.

{object} email options

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

{object} full description

{
	temlateId?: string; // ID шаблона внутри EmailMaker.
	email?: object; // email options.
	blocks?: []; // Дополнительные блоки.
	comments?: []; // Комментарии в письме.
}

Можно изменить содержимое в любой момент после инициализации с помощью метода instance.show(content).

config

Раздел для настройки внешнего вида и настроек редактора. Вы можете изменить конфигурацию этого раздела после инициализации, используя emailmaker.setConfig или emailmaker.updateConfig.

Список параметров секции 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 | | codeSideEnabled | Показ кнопки "Code-mode" в режиме, когда есть переключатель десктоп/мобайл. | true | | previewIconEnabled | Показ кнопки "Предпросмотр". | true | | previewModeEnabled | Ссылка на Предпросмотр. | true | | livePreviewEnabled | Показ кнопки "Тестировние в почтовиках". | true | | sendTestEnabled | Показ кнопки "Отправить тест". | true | | sharePreviewEnabled | Показ кнопки "Поделиться". | true | | webversionEnabled | Показ ссылки на веб-версию. | true | | | | | | emailDropdownMenuEnabled | Показ меню письма. | true | | emailDropdownMenuClone | Показ пункта "Клонировать". | true | | emailDropdownMenuImport | Показ пункта "Импортировать". | 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 | Текст основной кнопки. | true | | 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 | | | | | | formCellFieldVerticalAlignEnabled | Показ кнопок вертикального выравнивания у ячейки. | true | | formCellFieldBackgroundImageEnabled | Показ полей фонового изображения у ячейки. | true | | formCellFieldPaddingsEnabled | Показ полей внутренних отступов у ячейки. | true | | | | | | formTableFieldBackgroundImageEnabled | Показ полей фонового изображения у таблицы. | true | | formDivFieldBackgroundImageEnabled | Показ полей фонового изображения у контейнера. | true | | formEmailFieldBackgroundImageEnabled | Показ полей фонового изображения у письма. | 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 | | | | | | imageCenterStockEnabled | Таб Стока фотографий. | true | | imageCenterGifEnabled | Таб Стока гифок. | true | | imageCenterEditorEnabled | Таб редактора изображений. | true | | compressMaxSize | Макс. вес картинки после оптимизации, Мб. | true | | compressMaxWidthOrHeight | Макс. ширина картинки после оптимизации, px. | true |

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

События могут быть переданы в конфигурации или добавлены после при работе с экземпляром плагина. Все подписчики событий могут быть асинхронными функциями.

Пример

emailmaker.init({
	....,
	// Подписка на события в инициализации.
	handleReadEmail: (e) => {},
	handleSaveEmail: async (e) => {}
}).then((instance) => {
	// Подписка на события после инициализации.
	const dispose = instance.handleReadEmail(e => {});
	const dispose = instance.handleSaveEmail(async (e) => {});
});

Передавая асинхронную функцию, вы можете реализовать асинхронную загрузку данных.

Пример

emailmaker.init({
	element: "#test",
	content: {
		id: "1"
	}
	handleReadEmail: async (id) => {
		return await  fetchData(id); // Ваша функция получения данных.
	}
}).then((instance) => { 
	setTimeout(() => instance.show({ id: "2" }), 1000)
});

События

| Обработчик события | Описание | | ------------------------- | -------------------------------------------- | | handleReadEmail | Чтение письма | | handleSaveEmail | Сохранение / обновление письма | | handleReadEmailRevisions | Чтение списка автосохранений | | handleEmailAutosave | Автосохранение | | handleReadBlocks | Чтение списка блоков проекта | | handleSaveBlock | Сохранение / обновление блока проекта | | handleRemoveBlock | Удаление блока проекта | | handleReadComments | Чтение списка комментариев письма | | handleSaveComment | Сохранение / обновление комментария | | handleRemoveComment | Удаление комментария письма | | handleSaveButtonClick | Нажатие кнопки сохранения письма | | handleNextButtonClick | Нажатие кнопки Далее | | handlePreviousButtonClick | Нажатие кнопки Назад | | handleEmailChanged | Изменение любого параметра письма | | handleHtmlChanged | Изменение кода письма | | handleDestroy | Деструкция плагина | | handleLoad | Окончание инициализации экземпляра плагина | | handleLoadImage | Загрузка изображений | | handleNotify | Уведомление | | handleError | Уведомление типа Ошибка | | handleSuccess | Уведомление типа Успех | | handleTestEmailSend | Отправка тестового письма | | handleTestEmailModal | Открытие модального окна тестового письма |

Методы

| Метод | Описание | | ------------------------- | -------------------------------------------- | | init | Инициализация (async) | | show | Изменение содержимого после инициализации | | destroy | Деструкция экземпляра | | reset | Сброс всей конфигурации | | getEmail | Получение текущего письма | | getConfig | Получение конфигурации | | getBlocks | Получение блоков проекта | | getComments | Получение комментариев письма | | getEmailRevisions | Получение списка контроля версий | | setConfig | Установка новых парамеров config | | updateConfig | Добавление к параметрам config | | notify | Показ уведомлений | | getElement | Получение элемента инициализации | | save | Сохраенние письма. | | compileEmail | Получение скопмилированного письма |