email-maker-dev

Установка

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

$ npm i @emailmaker/emailmaker@1.0.63-alpha.3 -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	Получение скопмилированного письма