A powerful and customizable email template builder React component library with visual editing, internationalization, and image upload support
npm install monto-email-builder> node >= 18 + pnpm
一个功能完整的邮件模板编辑器 React 组件,可以在其他 React 项目中使用。
```
packages/editor-sample/
├── src/ # 库源代码(会被打包到 npm)
│ ├── EmailBuilder/ # 主组件
│ ├── App/ # 内部组件
│ ├── documents/ # 核心逻辑
│ ├── getConfiguration/ # 配置管理
│ ├── i18n/ # 国际化
│ ├── theme.ts # 主题配置
│ └── index.ts # 库入口文件
├── docs/ # 开发预览项目(不会被打包)
│ ├── main.tsx # 预览入口
│ ├── index.html # 预览 HTML
│ └── favicon/ # 网站图标
├── dist/ # 库构建输出(发布到 npm)
└── docs-dist/ # 预览构建输出(不发布)
- 库代码:src/ 文件夹包含所有库代码,会被打包到 npmdocs/
- 开发预览: 文件夹包含本地开发和预览的代码,不会被打包npm run dev
- 构建命令:
- - 启动开发预览服务器(使用 docs 文件夹)npm run build:lib
- - 构建库代码(输出到 dist 文件夹)npm run build
- - 构建预览版本(输出到 docs-dist 文件夹)
`bash`
npm install monto-email-builder或
yarn add monto-email-builder或
pnpm add monto-email-builder
由于这是一个库,您需要安装以下 peerDependencies:
`bash必需依赖
npm install react react-dom
npm install @mui/material @mui/icons-material
npm install @emotion/react @emotion/styled
npm install zustand zod react-colorful
或者使用 yarn/pnpm:
`bash
yarn
yarn add react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled zustand zod react-colorful @usewaypoint/block-avatar @usewaypoint/block-button monto-email-block-columns-container @usewaypoint/block-container @usewaypoint/block-divider @usewaypoint/block-heading @usewaypoint/block-html @usewaypoint/block-image @usewaypoint/block-spacer @usewaypoint/block-text @usewaypoint/document-core @usewaypoint/email-builderpnpm
pnpm add react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled zustand zod react-colorful @usewaypoint/block-avatar @usewaypoint/block-button monto-email-block-columns-container @usewaypoint/block-container @usewaypoint/block-divider @usewaypoint/block-heading @usewaypoint/block-html @usewaypoint/block-image @usewaypoint/block-spacer @usewaypoint/block-text @usewaypoint/document-core @usewaypoint/email-builder
`基本使用
`tsx
import { EmailBuilder } from 'monto-email-builder';function MyApp() {
return ;
}
`$3
组件支持内嵌在任意容器中,只需要给容器设置固定高度即可:
`tsx
import { EmailBuilder } from 'monto-email-builder';function MyApp() {
return (
);
}
`或者使用 CSS:
`tsx
import { EmailBuilder } from 'monto-email-builder';function MyApp() {
return (
);
}
``css
.email-builder-container {
width: 100%;
height: 800px; / 或使用其他高度值 /
}
`完整示例
`tsx
import { EmailBuilder, TEditorConfiguration } from 'monto-email-builder';function MyApp() {
// 初始文档配置(可选)
const initialDocument: TEditorConfiguration = {
root: {
type: 'EmailLayout',
data: {
backdropColor: '#F5F5F5',
canvasColor: '#FFFFFF',
textColor: '#262626',
fontFamily: 'MODERN_SANS',
childrenIds: [],
},
},
};
// 文档变化回调
const handleChange = (document: TEditorConfiguration) => {
console.log('Document changed:', document);
// 可以将文档保存到服务器
// saveToServer(document);
};
// 图片上传处理函数
const handleImageUpload = async (file: File): Promise => {
const formData = new FormData();
formData.append('image', file);
const response = await fetch('/api/upload', {
method: 'POST',
body: formData,
});
const data = await response.json();
return data.url; // 返回图片 URL
};
return (
initialDocument={initialDocument}
initialLanguage="zh"
imageUploadHandler={handleImageUpload}
onChange={handleChange}
/>
);
}
`API
$3
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
|
initialDocument | TEditorConfiguration \| undefined | undefined | 初始化的邮件模板配置 JSON |
| initialLanguage | 'zh' \| 'en' | 'en' | 初始语言 |
| imageUploadHandler | (file: File) => Promise | undefined | 图片上传回调函数,接收 File 对象,返回 Promise(图片 URL) |
| onChange | (document: TEditorConfiguration) => void \| undefined | undefined | 文档变化时的回调函数 |
| theme | Theme \| undefined | undefined | 自定义 Material-UI 主题 |$3
`tsx
import type {
EmailBuilderProps,
TEditorConfiguration,
TEditorBlock,
Language,
} from 'monto-email-builder';
`$3
`tsx
import { useDocument, useLanguage } from 'monto-email-builder';function MyComponent() {
const document = useDocument(); // 获取当前文档
const language = useLanguage(); // 获取当前语言
}
`特性
- ✅ 可视化邮件模板编辑器
- ✅ 支持多种邮件块类型(文本、图片、按钮、容器等)
- ✅ 实时预览
- ✅ 导出 HTML 和 JSON
- ✅ 国际化支持(中文/英文)
- ✅ 图片上传支持
- ✅ 完全可定制
开发
`bash
安装依赖
npm install启动开发服务器
npm run dev构建
npm run build
``MIT