# email-maker-dev
Latest version **1.0.63-alpha.3** (published 2025-03-27) · ISC license · 0 weekly downloads
## Install
```sh
npm install email-maker-dev
pnpm add email-maker-dev
yarn add email-maker-dev
bun add email-maker-dev
```
## Health
**Score 35/100 (D)** — status: maintenance-mode.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads; large bundle.
Negative: stale; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.63-alpha.3 |
| Published | 2025-03-27 |
| First published | 2023-09-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 43.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | emailmaker |
## Links
- npm: https://www.npmjs.com/package/email-maker-dev
- npm.io page: https://npm.io/package/email-maker-dev
## Recent versions
- 1.0.63-alpha.3 (latest) — 2025-03-27
- 1.0.63-alpha.2 — 2025-03-27
- 1.0.63-alpha.1 — 2025-03-27
- 1.0.62 — 2025-03-26
- 1.0.61 — 2025-03-24
- 1.0.60 — 2025-03-12
- 1.0.59 — 2025-02-25
- 1.0.58 — 2025-02-21
- 1.0.57 — 2025-02-12
- 1.0.56 — 2025-02-04
- 1.0.55 — 2025-02-03
- 1.0.54 — 2025-01-30
- 1.0.53 — 2025-01-30
- 1.0.52 — 2025-01-27
- 1.0.51 — 2025-01-24
- … 118 more at https://npm.io/package/email-maker-dev/versions
## README
# Установка
Выполните этот код в командной строке:
```cmd
$ npm i @emailmaker/emailmaker@1.0.63-alpha.3 -save
```
Добавьте EmailMaker plugin в ваш App config.
### Для сборщика Webpack
Импорт пакета:
```javascript
const emailMakerPlugin = require('@emailmaker/emailmaker/webpack')
```
Определение пакета в приложении:
```javascript
module.exports = {
plugins: [
new EmailmakerWebpackPlugin(),
]
}
```
### Для сборщика Vite
Импорт пакета:
```javascript
import emailMakerPlugin from 'emailmaker/vite'
```
Определение пакета в приложении:
```javascript
export default defineConfig({
plugins: [emailMakerPlugin()],
})
```
# Инициализация
Импортируйте EmailMaker plugin в вашем компоненте:
```javascript
import * as emailmaker from "@emailmaker/emailmaker"
```
Параметры инициализации плагина содержат параметр `getAuthToken`. В него должна быть передана функция, которая запрашивает авторизационный OAuth токен по Client ID и Client Secret.
### Получение OAuth токена на бэкенде
```curl
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
```javascript
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
```javascript
{
id?: string; // Уникальный ID проекта в вашей системе.
html?: string; // HTML верстка письма.
subject?: string; // Тема письма.
preheader?: string; // Прехедер письма.
}
```
#### {object} full description
```javascript
{
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 |
### Обработка событий
События могут быть переданы в конфигурации или добавлены после при работе с экземпляром плагина. Все подписчики событий могут быть асинхронными функциями.
#### Пример
```javascript
emailmaker.init({
....,
// Подписка на события в инициализации.
handleReadEmail: (e) => {},
handleSaveEmail: async (e) => {}
}).then((instance) => {
// Подписка на события после инициализации.
const dispose = instance.handleReadEmail(e => {});
const dispose = instance.handleSaveEmail(async (e) => {});
});
```
Передавая асинхронную функцию, вы можете реализовать асинхронную загрузку данных.
#### Пример
```javascript
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 | Получение скопмилированного письма |
---
_Source: https://npm.io/package/email-maker-dev · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._