Skip to content

Latest commit

 

History

History
147 lines (108 loc) · 6.9 KB

readme.md

File metadata and controls

147 lines (108 loc) · 6.9 KB
Raw

Easy email



Using TypeScript

Pro Version Announcement

We are delighted to announce that we now have a more powerful and customizable commercial version available. If it is for internal use only, then the open-source version is sufficient. However, if your editor is a critical feature, I recommend using the commercial version. Check it out here .

Introduction

Easy email is developed based on the MJML and has very good compatibility. At the same time, it can generate code through drag-and-drop editing.

Features:

  • Drag and drop editor
  • Can be converted into MJML, or generated through MJML
  • Defined custom block
  • Dynamic rendering
Video Overview
Overview

Live Demo

Check out the live demo here: email.maocanhua.cn

Pro version live demo here: demo.easyemail.pro.

Getting started

$ npm install --save easy-email-core easy-email-editor easy-email-extensions react-final-form

or

$ yarn add easy-email-core easy-email-editor easy-email-extensions react-final-form
import React from 'react';
import { BlockManager, BasicType, AdvancedType } from 'easy-email-core';
import { EmailEditor, EmailEditorProvider } from 'easy-email-editor';
import { ExtensionProps, StandardLayout } from 'easy-email-extensions';

import 'easy-email-editor/lib/style.css';
import 'easy-email-extensions/lib/style.css';

// theme, If you need to change the theme, you can make a duplicate in https://arco.design/themes/design/1799/setting/base/Color
import '@arco-themes/react-easy-email-theme/css/arco.css';

const initialValues = {
  subject: 'Welcome to Easy-email',
  subTitle: 'Nice to meet you!',
  content: BlockManager.getBlockByType(BasicType.PAGE)!.create({}),
};

export default function App() {

  return (
    <EmailEditorProvider
      data={initialValues}
      height={'calc(100vh - 72px)'}
      autoComplete
      dashed={false}
    >
      {({ values }) => {
        return (
          <StandardLayout
            showSourceCode={true}
          >
            <EmailEditor />
          </StandardLayout>
        );
      }}
    </EmailEditorProvider>
  );
}

Configuration

property Type Description
height string / number Set the height of the container
data interface IEmailTemplate { content: IPage; subject: string; subTitle: string; } Source data
children ( props: FormState,helper: FormApi<IEmailTemplate, Partial>) => React.ReactNode ReactNode
onSubmit Config<IEmailTemplate, Partial>['onSubmit']; Called when the commit is triggered manually
fontList { value: string; label: string; }[]; Default font list.
interactiveStyle { hoverColor?: string; selectedColor?: string;} Interactive prompt color
onUploadImage (data: Blob) => Promise; Triggered when an image is pasted or uploaded
autoComplete boolean Automatically complete missing blocks. For example, Text => Section, will generate Text=>Column=>Section
mergeTags Object A merge tag is a bit of specific code that allows you to insert dynamic data into emails. Like {{user.name}}, and used for preview
previewInjectData Object Dynamic data for preview, it will overwrite mergeTags.
onBeforePreview (html: string, mergeTags: PropsProviderProps['mergeTags']) => string Promise You can replace mergeTags when previewing.

Development

$ git clone [email protected]:zalify/easy-email.git
$ cd easy-email


$ pnpm install
$ pnpm run install-all
$ pnpm run dev

If you need some new features, we always welcome you to submit a PR.

License

The MIT License