email-maker-dev v1.0.60

Установка

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

$ npm i @emailmaker/emailmaker@1.0.60 -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

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

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

Пример

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)
});

События

Методы