0

GitHub - zalify/easy-email-editor: Easy Email Editor is a feature-rich, top open...

 4 weeks ago
source link: https://github.com/zalify/easy-email-editor
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Repository files navigation

Easy email

Pro Version Announcement

We are delighted to announce that we now have a more powerful and customizable commercial version available. 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
$ 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 { useWindowSize } from 'react-use';

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() {
  const { width } = useWindowSize();

  const smallScene = width < 1400;

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

Examples

Vite: https://github.com/m-Ryan/easy-email-demo

Nextjs: https://github.com/m-Ryan/easy-email-nextjs-demo

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
onAddCollection (payload: CollectedBlock) => void; Add to collection list
onRemoveCollection (payload: { id: string; }) => void; Remove from collection list
dashed boolean Show dashed
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.

Hotkeys

hotkey Description
mod+z undo
mod+y redo
delete/backspace delete block
tab / shift + tab fast select block, if block is focusing,tab select next block & shift + tab select prev block

How does it work?

work.png

Packages

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK