Email Editor

Email Editor is a React component that allows users to create emails using a drag-and-drop interface.

Live Demo

http://emaileditordnd.netlify.app/

Installation

To use Email Editor, simply run the following command:

1npm i @editex/react-email-editor

Usage/Examples

To use Email Editor in your React project, import the component and include it in your JSX code:

index.js

1import EmailEditor from "zgm-email-editor";
2import { useEffect, useRef, useState } from "react";
3
4function MyEmailEditor() {
5  const emailEditorRef = useRef(null);
6  const [emailData, setEmailData] = useState(null);
7
8  useEffect(() => {
9    setTimeout(() => {
10      setEmailData([]);
11    }, 1000);
12  }, []);
13
14  const exportHtml = () => {
15    emailEditorRef.current.exportHtml();
16  };
17
18  const showEmailData = () => {
19    console.log(emailEditorRef.current.blockList);
20  };
21
22  return (
23    <div class="page">
24      <div className="page-header">
25        <button onClick={exportHtml}>Export HTML</button>
26        <button onClick={showEmailData}>Show email data</button>
27      </div>
28      <div className="page-content">{emailData ? <EmailEditor ref={emailEditorRef} defaultBlockList={emailData} /> : <>Loading....</>}</div>
29    </div>
30  );
31}

index.js

1import EmailEditor from "@editex/react-email-editor";
2import { useEffect, useRef, useState } from "react";
3
4function MyEmailEditor() {
5  const emailEditorRef = useRef(null);
6  const [emailData, setEmailData] = useState(null);
7
8  useEffect(() => {
9    setTimeout(() => {
10      setEmailData([]);
11    }, 1000);
12  }, []);
13
14  const exportHtml = () => {
15    const html = emailEditorEl.current.exportHtml();
16    const blob = new Blob([html], { type: "text/html" });
17    const a = document.createElement("a");
18    a.download = "email.html";
19    a.href = URL.createObjectURL(blob);
20    a.click();
21  };
22
23  const showEmailData = () => {
24    console.log(emailEditorRef.current.blockList);
25  };
26
27  return (
28    <div class="page">
29      <div className="page-header">
30        <button onClick={exportHtml}>Export HTML</button>
31        <button onClick={showEmailData}>Show email data</button>
32      </div>
33      <div className="page-content">{emailData ? <EmailEditor ref={emailEditorRef} defaultBlockList={emailData} /> : <>Loading....</>}</div>
34    </div>
35  );
36}

index.css

1.page {
2  display: flex;
3  flex-direction: column;
4  height: 100%;
5}
6
7.page-header {
8  padding: 8px 12px;
9  background-color: #374151;
10  display: flex;
11  align-items: end;
12  justify-content: space-between;
13  gap: 10px;
14}
15
16.page-content {
17  flex: 1;
18  overflow: auto;
19}

Localization

This Email Editor component has built-in Chinese and English.

This project supports localization for multiple languages. Currently, the following languages are supported:

• English(en)
• Chinese(zh)

Example usage:

1const MyEmailEditor = () => {
2  const [language, setLanguage] = useState("en");
3
4  const changeLanguage = (language) => () => {
5    setLanguage(language);
6  };
7
8  return (
9    <>
10      <div>
11        <span onClick={changeLanguage("en")}>EN</span>/<span onClick={changeLanguage("zh")}>中文</span>
12      </div>
13      <EmailEditor language={language} />
14    </>
15  );
16};

en.js

1const en = {
2  drag_block_here: "Drag block here",
3  blocks: "Blocks",
4  photos: "Photos",
5  powered_by_pexels: "Powered by Pexels",
6  loading: "Loading...",
7  content: "Content",
8  body_settings: "Theme Settings",
9  pre_header: "Pre-header",
10  pre_header_description: "The pre-header is a short summary text that follows the subject line when viewing an email in the inbox.",
11  confirm: "Confirm",
12  cancel: "Cancel",
13  add_blocks: "Add blocks",
14
15  // column block
16  column: "Column",
17  columns: "Columns",
18  column_settings: "Column Settings",
19  column_styles: "Column Styles",
20  column_delete: "Delete Column",
21  column_delete_desc: "Are you sure you want to delete {{count}} extra columns? ",
22
23  // text block
24  text: "Text",
25  text_content: "This is a text, click to edit text",
26  text_settings: "Text Settings",
27  text_styles: "Text Styles",
28  text_align: "Text Align",
29
30  // heading block
31  heading: "Heading",
32  heading_content: "This is a heading, click to edit heading",
33  heading_settings: "Heading Settings",
34  heading_type: "Heading Type",
35
36  // button block
37  button: "Button",
38  button_settings: "Button Settings",
39  button_action: "Button Action",
40  button_styles: "Button Styles",
41  button_padding: "Button Padding",
42
43  // divider block
44  divider: "Divider",
45  divider_settings: "Divider Settings",
46  divider_type: "Divider Type",
47  divider_styles: "Divider Styles",
48
49  // image block
50  image: "Image",
51  image_action: "Image Action",
52  image_url: "Image URL",
53  image_alt: "Image Alt",
54  image_styles: "Image Styles",
55  image_settings: "Image Settings",
56
57  // social link block
58  social_link: "Social Link",
59  social_link_settings: "Social Link Settings",
60  add_social_link: "Add Social Link",
61  social_link_size: "Social Link Size",
62  social_links: "Social Links",
63
64  // colors
65  content_background_color: "Content Background Color",
66  background_color: "Background Color",
67  text_color: "Text Color",
68  email_theme_background_color: "Email Theme Background Color",
69  font_color: "Font Color",
70  button_color: "Button Color",
71  divider_color: "Divider Color",
72
73  //styles
74  action_type: "Action Type",
75  top: "Top",
76  right: "Right",
77  left: "Left",
78  bottom: "Bottom",
79  line_height: "Line Height",
80  link: "Link",
81  link_url: "Link URL",
82  padding_settings: "Padding Settings",
83  width: "Width",
84  height: "Height",
85  width_auto: "Width Auto",
86  font_size: "Font Size",
87  font_family: "Font Family",
88  solid: "Solid",
89  dotted: "Dotted",
90  dashed: "Dashed",
91  align: "Align",
92  spacing: "Spacing",
93};
94
95export default en;

zh.js

1const zh = {
2  drag_block_here: "请将模块拖放到此处",
3  blocks: "模块",
4  photos: "图片",
5  powered_by_pexels: "图片由Pexels提供",
6  loading: "加载中...",
7  content: "内容",
8  body_settings: "邮件主题设置",
9  pre_header: "预标题",
10  pre_header_description: "预标题是在收件箱中查看电子邮件时跟随主题行的简短摘要文本。",
11  confirm: "确认",
12  cancel: "取消",
13  add_blocks: "请添加块",
14
15  // column block
16  column: "列",
17  columns: "列排版",
18  column_settings: "列设置",
19  column_styles: "列样式",
20  column_delete: "删除列",
21  column_delete_desc: "您确定删除多余的{{count}}列吗？",
22
23  //text block
24  text: "文本",
25  text_content: "这是一个文本，点击修改文本",
26  text_settings: "文本设置",
27  text_styles: "文本样式",
28  text_align: "文本对齐方式",
29
30  // heading block
31  heading: "标题",
32  heading_content: "这是一个标题，点击修改标题",
33  heading_settings: "标题设置",
34  heading_type: "标题类型",
35
36  // button block
37  button: "按钮",
38  button_settings: "按钮设置",
39  button_action: "点击按钮触发",
40  button_styles: "按钮样式",
41  button_padding: "按钮内边距",
42
43  // divider block
44  divider: "分割线",
45  divider_settings: "分割线设置",
46  divider_type: "分割线类型",
47  divider_styles: "分割线样式",
48
49  // image block
50  image: "图片",
51  image_settings: "图片设置",
52  image_action: "点击图片跳转",
53  image_url: "图片URL",
54  image_alt: "图片alt",
55  image_styles: "图片样式",
56
57  // social link block
58  social_link: "社交链接",
59  add_social_link: "添加社交链接",
60  social_link_size: "社交链接大小",
61  social_links: "社交链接",
62  social_link_settings: "社交链接设置",
63
64  // colors
65  content_background_color: "内容背景颜色",
66  background_color: "背景颜色",
67  text_color: "文本颜色",
68  email_theme_background_color: "邮件主题色",
69  font_color: "字体颜色",
70  button_color: "按钮颜色",
71  divider_color: "分割线颜色",
72
73  // styles
74  action_type: "按钮类型",
75  top: "上",
76  right: "右",
77  left: "左",
78  bottom: "下",
79  line_height: "行高",
80  link: "超链接",
81  link_url: "超链接URL",
82  padding_settings: "内边距设置",
83  width_auto: "宽度自适应",
84  width: "宽度",
85  height: "高度",
86  font_size: "字体大小",
87  font_family: "字体",
88  align: "对齐方式",
89  solid: "实线",
90  dotted: "虚线（点）",
91  dashed: "虚线（破折号）",
92  spacing: "间距",
93};
94
95export default zh;

Modify en / zh text content

1const MyEmailEditor = () => {
2  const [language, setLanguage] = useState("en");
3
4  const changeLanguage = (language) => () => {
5    setLanguage(language);
6  };
7
8  return (
9    <>
10      <div>
11        <span onClick={changeLanguage("en")}>EN</span>/<span onClick={changeLanguage("zh")}>中文</span>
12      </div>
13      <EmailEditor
14        language={language}
15        customLanguageLibraries={{
16          en: {
17            column: "Column",
18            columns: "Columns",
19          },
20          zh: {
21            column: "列",
22            columns: "列",
23          },
24        }}
25      />
26    </>
27  );
28};

Custom language

To add support for a new language, follow these steps:

1const MyEmailEditor = () => {
2  const [language, setLanguage] = useState("en");
3
4  const changeLanguage = (language) => () => {
5    setLanguage(language);
6  };
7
8  return (
9    <>
10      <div>
11        <span onClick={changeLanguage("en")}>EN</span>/<span onClick={changeLanguage("zh")}>中文</span>/
12        <span onClick={changeLanguage("zh_TW")}>繁体中文</span>
13      </div>
14      <EmailEditor
15        language={language}
16        customLanguageLibraries={{
17          en: {
18            column: "Column",
19            columns: "Columns",
20          },
21          zh: {
22            column: "列",
23            columns: "列",
24          },
25          zh_TW: {
26            drag_block_here: "請將模組拖曳到此處",
27            blocks: "模組",
28            photos: "圖片",
29            loading: "載入中...",
30            content: "內容",
31            body_settings: "郵件主旨設定",
32            pre_header: "預標題",
33            pre_header_description: "預標題是在收件匣中查看電子郵件時跟隨主題行的簡短摘要文字。",
34            confirm: "確認",
35            cancel: "取消",
36            // ........
37          },
38        }}
39      />
40    </>
41  );
42};

Features

• Drag-and-drop interface for easy email creation
• Customizable email templates
• Support for multiple email clients and devices
• Responsive design for mobile and desktop viewing