Quickstart
We have a lot of quick start demos, usually you can find what you need here
Getting started
- npm
- Yarn
- pnpm
npm install --save easy-email-pro-core easy-email-pro-editor easy-email-pro-theme easy-email-pro-kit @arco-design/web-react @arco-themes/react-easy-email-pro mjml-browser slate slate-react slate-history
yarn add easy-email-pro-core easy-email-pro-editor easy-email-pro-theme easy-email-pro-kit @arco-design/web-react @arco-themes/react-easy-email-pro mjml-browser slate slate-react slate-history
pnpm add easy-email-pro-core easy-email-pro-editor easy-email-pro-theme easy-email-pro-kit @arco-design/web-react @arco-themes/react-easy-email-pro mjml-browser slate slate-react slate-history
Create your editor
import React, { useCallback, useMemo } from "react";
import {
EmailEditorProps,
EmailTemplate,
EmailEditorProvider,
} from "easy-email-pro-editor";
import { BlockManager, ElementType, PluginManager } from "easy-email-pro-core";
import { Retro, ThemeConfigProps } from "easy-email-pro-theme";
import "easy-email-pro-theme/lib/style.css";
// Theme style, If you need to change the theme, you can make a duplicate in https://arco.design/themes/design/6979/setting/base/Color
import "@arco-themes/react-easy-email-pro/css/arco.css";
import templateData from "./template.json";
export default function MyEditor() {
// You can fetch data from the server.
const initialValues: EmailTemplate | null = useMemo(() => {
return {
subject: templateData.subject,
content: templateData.content,
};
}, []);
// example
const onUpload = (file: Blob): Promise<string> => {
return Promise.resolve(
"https://res.cloudinary.com/dfite2e16/image/upload/v1681907056/clgnivsuj0018z9ltiixmxf6k/ilh6rri61f512i7wb6yd.png"
);
};
const onSubmit: ThemeConfigProps["onSubmit"] = async (values, editor) => {
console.log(values, editor);
};
const onChange: ThemeConfigProps["onChange"] = async (values, editor) => {
console.log("onChange", values);
};
const config = Retro.useCreateConfig({
// Paid clients fill in the Client ID here. After subscribing to the paid plan, support will send you the client ID
clientId: process.env.CLIENT_ID,
height: "calc(100vh - 66px)",
onUpload,
initialValues: initialValues,
onSubmit: onSubmit,
onChange: onChange,
showSourceCode: true,
showLayer: true,
showPreview: true,
showSidebar: true,
compact: false,
showDragMoveIcon: true,
showInsertTips: true,
});
return (
<EmailEditorProvider {...config}>
<Retro.Layout></Retro.Layout>
</EmailEditorProvider>
);
}
template.json
{
"subject": "Welcome to Easy Email Pro",
"content": {
"data": {
"breakpoint": "480px",
"globalAttributes": {
"font-family": "Arial, sans-serif"
}
},
"type": "page",
"children": [
{
"type": "standard-section",
"data": {},
"attributes": {},
"children": [
{
"type": "standard-column",
"data": {},
"attributes": {},
"children": [
{
"type": "placeholder",
"data": {},
"attributes": {},
"children": [
{
"text": ""
}
]
}
]
}
]
}
],
"attributes": {
"background-color": "#f5f5f5",
"content-background-color": "#ffffff"
}
}
}
How it work
Demo
Demo check here https://demo.easyemail.pro. Demo code check here https://github.com/easy-Email-Pro/